Building multiple datasets using the fleet using ajax - data is not displayed correctly

Question

I use the fleet to try to build some data. This worked for me with one data set, and when I tried to change the code to use several data sets, I had an error that it was difficult for me to track work, and it stopped working. I am sure that this is a change that I made, but for life I can not trace it.

The Y-axis shows -1.0, -0.5, 0, 0.5, and 1.0 - Im values ​​are unlikely to be expected, and there is no X-Axis data. The graph looks blank.

I am trying to do something similar to the reputation graph in StackOverflow, but this will represent different numerical values. The first value of the data pair means the timestamp (I think I calculated it correctly), and the second value of the data pair is the value that will be displayed.

I made sure that I did not have my quotation marks that I saw was one of the most common problems.

Any feedback or help in pointing out a problem would be most valuable.

stats.js

 function plotField(){ var field = 'activeUsers,totalUsers'; var url = '/api/consoleGet_stats?field='+field; $.ajax({ url: url, method: 'GET', dataType: 'json', success: function(datasets){ var i = 0; console.log(datasets); $.each(datasets, function(key, val){ val.color=i; i++; var data = [ $(this) ]; console.log(data); var options = { lines: { show: true }, points: { show: true }, xaxis: {mode: 'time', timeformat: "%y/%m/%d", tickDecimals: 0, tickSize: 1 } }; var placeholder = $("#placeholder"); $.plot(placeholder, data, options); }); } }); } 

consoleGet_stats.php

 <?php //simplified for example purposes $fields=explode(",",$_REQUEST['field']); foreach ($fields as $field){ $rows=$dbConnect->getRows('select date, ' .$field. ' from websiteStats order by id asc'); $resultData = array('label' => $field); foreach($rows as $row){ $t = strtotime($row['date']." UTC") * 1000; $resultData['data'][]=array($t, (int)$row[$field]); } $results[]=$resultData; } die(Json_encode($results)); ?> 

console output

 [Object { label="activeUsers", data=[6]}, Object { label="totalUsers", data=[6]}] [[Object { label="activeUsers", data=[6], color=0}]] [[Object { label="totalUsers", data=[6], color=1}]] 

returned json from firebug (formatting added for this post)

 [ {"label":"activeUsers","data":[[1334583090000,26],[1334669491000,26],[1334755893000,26],[1334842290000,26],[1334928691000,26],[1335015093000,26]]}, {"label":"totalUsers","data":[[1334583090000,150],[1334669491000,170],[1334755893000,193],[1334842290000,200],[1334928691000,225],[1335015093000,257]]} ] 

---

Answer 1

I managed to solve the problem by changing the code to a more simplified one:

 function plotField(){ var field = 'activeUsers,totalUsers'; var url = '/api/consoleGet_stats?field='+field; $.ajax({ url: url, method: 'GET', dataType: 'json', success: function(datasets){ $.plot($("#placeholder"), datasets); } }); } 

Answer 2

Instead of passing data arguments one by one (which, by the way, overwrites the previous plot), you can display everything at once. Now I understand that you are iterating to get the appropriate color, but the way you do it now is no different from the default way that does it.

If you need other colors, you can specify them in the series data as:

 { "label":"activeUsers", "data": xxx, "color": 1 // Or eg "rgb(255,0,0)" } 

When using integers, you use the colors generated by the fleet. Here's a little fiddle of the actual graphing process. There I use minTickSize: [1, "day"] to indicate that each tick should represent one day.

You should use this with ajax as:

 function plotField(){ var field = 'activeUsers,totalUsers'; var url = '/api/consoleGet_stats?field='+field; $.ajax({ url: url, method: 'GET', dataType: 'json', success: function(datasets){ var options = { lines: { show: true }, points: { show: true }, xaxis: { mode: 'time', timeformat: "%y/%m/%d", minTickSize: [1, "day"] } } var placeholder = $("#placeholder"); $.plot(placeholder, datasets, options); } }); } 

Answer 3

A solution that works great for me is:

serverAjaxPage.php

 <?php echo '[ { "data": [ [ 1220565600000, 106.23 ], [ 1220824800000, 106.34 ] ], "label": "Oil price ($)" }, { "data": [ [ 1167606000000, 0.758 ], [ 1167692400000, 0.758 ], [ 1167778800000, 0.7547 ] ], "label": "USD/EUR exchange rate", "yaxis": 2 } ]'; 

(data from Example of several axes )

clientPage.html

 $(function () { //Fetch data with AJAX function fetchData() { // Normally we call the same URL - a script connected to a // database - but in this case we only have static example // files, so we need to modify the URL. $.ajax({ url: "/serverAjaxPage.php", type: "GET", dataType: "json", success: onDataReceived }); function onDataReceived(series) { // Load all the data in one pass; if we only got partial // data we could merge it with what we already have. data = series; var options = { series: { lines: { show: true, }, points: { show: false } }, xaxis: { ticks: 11, tickDecimals: 0, mode: "time", timeformat: "%d-%m-%Y" }, yaxes: [{ position: "left" }], legend: { position: "sw" } }; $.plot("#placeholder", data, options); } } //If you want to load data every 10 seconds var interval = 10000; //Set interval operation var tid = setInterval(fetchData, interval); });