Databases
StackOverflow2013
Postsdbo
POFlot bar graph with AJAX data
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFlot bar graph with AJAX data
    text
    copied!<p>I have an issue with Flot charts and the data that is coming from AJAX. Basically I created arrays to display the graph but somehow I see the axis label but no data. Also how can I do a stacked or a bar graph?</p> <p>Edit: Or can anybody tell me how to display data in flot using AJAX with labels on the x-axis. You can see the code here <a href="http://jsfiddle.net/DaG5W/284/" rel="nofollow">http://jsfiddle.net/DaG5W/284/</a>. Anybody please let me know what I am doing wrong here?</p> <p>Here is the code I used. </p> <pre><code>$.getJSON(url, function(output) { var calendar, count, fieldNames, i, j, values, xAxis; fieldNames = new Array(); i = 0; while (i &lt; output.length) { if (fieldNames.indexOf(output[i].FieldName) &lt; 0) { fieldNames.push(output[i].FieldName); } i++; } calendar = new Array(); i = 0; while (i &lt; output.length) { if (calendar.indexOf(output[i].Calendar) &lt; 0) { calendar.push(output[i].Calendar); } i++; } xAxis = []; i = 0; while (i &lt; calendar.length) { xAxis.push([parseInt(i + 1), calendar[i]]); i++; } data = []; i = 0; while (i &lt; fieldNames.length) { values = []; count = 0; j = 0; while (j &lt; output.length) { if (fieldNames[i] === output[j].FieldName) { count++; values.push([parseInt(count), parseInt(output[j].Totals)]); } j++; } data.push([ { label: fieldNames[i].toString(), data: values, bars: { show: true }, lines: { show: false } } ]); } return i++; }); options = { xaxis: { ticks: xAxis } }; plot = $.plot($("#div"), [data], options); } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload