How to use the graph of fleet selection with time on the xaxis axis?

Question

UPDATE: here is a fiddle demonstrating: http://jsfiddle.net/MsybN/1/

I use the fleet selection chart: http://www.flotcharts.org/flot/examples/selection/index.html

I use time as xaxis, but when I drag it to zoom in to a shorter time interval, the graph becomes empty. In working examples, xaxis is based on time, but in years, so it is easy to build numerically (in 1994, it went half of 1994).

I have a month on my xaxis, for example: 'Jul 2012', 'Jan 2013', 'Jul 2013' and so on at 6-month intervals. I use it in combination with a crosshair plugin and a time plugin.

Scaling does not work. It correctly takes millisecond values, but cannot set a graph for them. The code below can anyone help?

imported scripts: jquery.flot.js jquery.flot.time.js jquery.flot.crosshair.js jquery.flot.selection.js

$(function() { //define datasets var datasets = { "blah": { label: "blah", key: "blah", data: [] }, //etc }; $.each(datasets, function(i, item) { item.data.push([(time*1000), datapoints]); }); // hard-code color indices to prevent them from shifting as // countries are turned on/off var i = 0; $.each(datasets, function(key, val) { val.color = i; ++i; }); var plot; var options = { xaxis: { timezone: "browser", mode: "time" }, series: { lines: { show: true } }, crosshair: { mode: "x" }, grid: { hoverable: true, autoHighlight: false }, selection: { mode: "x" } }; function plotAccordingToChoices() { var data = []; //inputs not shown choiceContainer.find("input:checked").each(function () { var key = $(this).attr("name"); if (key && datasets[key]) { data.push(datasets[key]); } }); if (data.length > 0) { plot = $.plot("#placeholder", data, options); } } plotAccordingToChoices(); var placeholder = $("#placeholder"); placeholder.bind("plotselected", function (event, ranges) { var from = Math.ceil(ranges.xaxis.from / 1000); var to = Math.ceil(ranges.xaxis.to / 1000); //THIS IS WHERE IT BREAKS plot = $.plot(placeholder, datasets, $.extend(true, {}, options, { xaxis: { min: from, max: to } })); }); }); </script> 

Answer 1

(Updated based on problem solving in the script)

There are three problems:

• The main problem is that you are not using the same code to re-embed the plotselected callback, as you do for the plot initially. The plotAccordingToChoices function creates a new array containing series of data from a dataset object. The default callback is simply passed in the dataset itself, which is invalid.

  It was hard to see in the source code snippet since you skipped these lines.

• As mentioned earlier, you incorrectly divide "from" and "by" by 1000; you must use range values ​​as is.

• Crosshairs do not work because updateLegend is undefined in your plothover callback. This is repeated several times when you move the mouse around the plot, blocking the crosshair.

I updated Fiddle to demonstrate.