flot

问题 I want to create something like this: The black line represents a specific value. I need this visualization within a phonegap-app. I'm using jQuery-mobile and Flotcharts for some other stuff. What would be the simplest way to go? Flotcharts does not seem right for this kind of chart. 回答1: I took a few moments to implement this based in part on @DNS's suggestions above. I did it without using any plugins, just straight flot magic. First, I created a gradient background image like the one above

问题 I need to know how I can easily add another series to an existing plot using Flot. Here is how I currently plot a single series: function sendQuery() { var host_name = $('#hostNameInput').val(); var objectName = $('#objectNameSelect option:selected').text(); var instanceName = $('#instanceNameSelect option:selected').text(); var counterName = $('#counterNameSelect option:selected').text(); $.ajax({ beforeSend: function () { $('#loading').show(); }, type: "GET", url: "http://okcmondev102/cgi

问题 I need to know how I can easily add another series to an existing plot using Flot. Here is how I currently plot a single series: function sendQuery() { var host_name = $('#hostNameInput').val(); var objectName = $('#objectNameSelect option:selected').text(); var instanceName = $('#instanceNameSelect option:selected').text(); var counterName = $('#counterNameSelect option:selected').text(); $.ajax({ beforeSend: function () { $('#loading').show(); }, type: "GET", url: "http://okcmondev102/cgi

问题 Here's my JSFiddle. The issue is that the stacked bars overlap / doesn't show all distinct labels stacked sometimes (see third bar in first chart). Not sure but, the issue is maybe due to the fact that the series is not the same length and it doesn't contain 0 if no data for a label, like in the second example in the JSFiddle? Q: How can I make the bar labels not overlap? var newData = []; var newLabels = []; var newTicks = []; for (var i = 0; i < dataFromServer.length; i++) { var datapoint =

问题 I am using Flot to chart some data that I pull back from the server. The X-axis data that I receive is in units of milliseconds, and I want to display the chart with the X-axis in units of seconds. So, I thought this was a good use of the API's transform axis option. I applied my transform like so: var plot = $.plot($("#placeholder"), { grid: { hoverable: true, clickable: true }, xaxis: { transform: function(x) { return x/1000; } } }); I can see that my transform function is being called by

问题 I am using Flotcharts to create a stacked bar chart to show breakdown of values. I have this working so that once I hover over the stack it will show a tool tip with the value for that stack in it (you can see this in the second column). What I need is at the top of all the stacks that it shows a label of the total value. Something like High Charts Stacked Column. You can see my code below. I loop through the data (using Smarty) and set it there. // set the data var data = [ { label: 'Tenant'

问题 I am using Flotcharts to create a stacked bar chart to show breakdown of values. I have this working so that once I hover over the stack it will show a tool tip with the value for that stack in it (you can see this in the second column). What I need is at the top of all the stacks that it shows a label of the total value. Something like High Charts Stacked Column. You can see my code below. I loop through the data (using Smarty) and set it there. // set the data var data = [ { label: 'Tenant'

问题 I have a little script that runs a simulation, of which I want to render the results 'live': for ( i < simulation steps ) { do_simulation(); render_with_flot(); } I noticed that the plot only gets rendered after the last step. Is there a way to 'suspend' javascript somehow to allow the rendering to run after each iteration? Or is there a way to make flot run synchronously? Or do I need to set my own timeouts for each iteration of the for-loop? This seems like kind of a hassle. 回答1: As an

问题 I want to build a flot chart from a table. The table is built using the jquery datatables plugin. The table can be edited inline. I was wondering if anyone had any tips to display the data in flot. Would you pull the data from json or directly from the chart to build the flot chart? The data is populated in dynamically using the datatables jquery plugin. The table looks like this.. <div id="plotarea"> <table> <caption>GDP, based on exchange rates, over time. Values in billion USDs.</caption>

问题 I notice that jQuery Flot is rounding down the results. But I want to show the actual decimal value for the result when you hover over the peaks and valleys in the tooltip. But not the x or y axis labels, but the graph result itself. So instead of "44", I want "44.05". Is there anything I can do to make that work? Everything I'm seeing is just for the axis labels. 回答1: The tool tip should allow you to do this - have a look at this fiddle http://jsfiddle.net/Rnusy/ var previousPoint = null; $(