flot

I have two or more flot charts displayed on the same page and use flot.navigate plugin for dragging and zooming. I can zoom and drag individual chart independent of other charts, but I would like to have other charts move or zoom together with the chart on which navigation action is applied. Some pages might have only two charts where some have five or six on the same page My fiddle has two charts displayed and one can zoom (mouse scroll) or drag only one chart. Any ideas or help with this is really appreciated. Thanks. http://jsfiddle.net/mashinista/cPNNJ/ <div id="placeholder1" style="width:

Is there a way to have Flot make axis numbers be comma-separated? So for example, instead of 1000000 have 1,000,000 rusty You can do that by using the tickFormatter property of the axis. xaxis: { tickFormatter: function(val, axis) { // insert comma logic here and return the string } } Source: http://people.iola.dk/olau/flot/API.txt (under "Customizing the axes") This page has a function to format numbers with commas: http://www.mredkj.com/javascript/nfbasic.html For Example on the yaxis: $(function () { var plotarea = $("#plotarea"); $.plot( plotarea , [data], { xaxis: {mode: "time",

I was having an issue where a flot graph would not render in a tabbed interface because the placeholder divs were children of divs with 'display: none'. The axes would be displayed, but no graph content. I wrote the javascript function below as a wrapper for the plot function in order to solve this issue. It might be useful for others doing something similar. function safePlot(placeholderDiv, data, options){ // Move the graph place holder to the hidden loader // div to render var parentContainer = placeholderDiv.parent(); $('#graphLoaderDiv').append(placeholderDiv); // Render the graph $.plot

I'm using jquery flot charts to represent my data. Here's the example JSFiddle I made that shows how the JSONS's required for the chart should look. The data source is from a MySql stored procedure that has the below output example: I need to represent in the chart, the count values stacked for different innumber 's on y-axis, the name values on x-axis, and in another chart, the values for outnumber . (in stacked bars). -The data series should match, so the specific labels should appear against customers. Here's the PHP I have so far: $query = $this->db->query("call GetAllCustomersV2($id,

I have a little problem with the Flot plugin while displaying the xaxis labels in the graph. They are 'mode: "time"' . Currently I use Flot with the tooltip function and the tooltip contains a date and time. I supply JSON to the plugin which contains timestamps. Afterwards I convert the timestamp and I display it in the tooltip. The problem is that while displaying the data in the graph, the times from the tooltips don't correspond to the xaxis labels generated by the plugin due to a difference between the timezones. My JSON timestamps are +2 GMT, but the xaxis labels in Flot are +0 GMT. So I

I'm trying to save a flot chart to an image and eventually to a pdf, but can't quite figure out how. Online I see that I can do canvas.toDataURL("image/png") But the trouble is how do I get the canvas in the first place, the examples say to use document.getElementById("canvas"); but for my code I'm using a div with id="placeholder" (per all the flot examples) and there's nothing labeled with a canvas tag in my html, and this doesn't seem to work. My javascript for flot looks like $.plot($("#placeholder"), [ d1, d2, d3 ], { series: { lines: { show:false }, bars: { show: true, barWidth: 0.6,

Using jQuery's flot, there's a way to allow items to be selected by hovering over them. In the options, grid[mouseActiveRadius] may be set to a number to indicate the desired length of the radius of the selection circle. For instance, if you set it to 10, then any mouse hover event will highlight the closest point in a 10 pixel radius circle. However, I wish to instead tell flot to hover the point that's the closest in the x direction (instead of the closest point period). EG in this example: point 1 is obviously a lot closer to x than point 2, but I still want flot to select point 2 since it