Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Needing example to load jqplot with multiple series, date-based data from json file

Tags:

jqplot

Been searching and cannot find exactly what I am looking for. Need to load multiple series into one jqplot, with each series coming from its own data file.

The example here http://www.jqplot.com/tests/data-renderers.php does show how to load a series from a file, but when I convert file to have date data, then it stops working, probably just a formatting issue, but cannot solve. What am I doing wrong?

Here is the data in the txt file: [["7/11/2011 04:00:00am",85.0],["7/12/2011 04:00:00AM",87.4],["7/13/2011 04:00:00AM",90.0]]

Here is the code:

<script class="code" type="text/javascript">$(document).ready(function(){
    var line = [ ];
var ajaxDataRenderer = function(url, plot) {
    var ret = null;
    $.ajax({
        // have to use synchronous here, else returns before data is fetched
        async: false,
        url: url,
        dataType:'json',
        success: function(data) {
            ret = data;
        }
    });
    return ret;
};

var jsonurl = "./jsondata1.txt";

plo12 = $.jqplot('chart2', jsonurl,{
    title: 'AJAX JSON Data Renderer',
    dataRenderer: ajaxDataRenderer,
    axes: {
      xaxis: {
          renderer:$.jqplot.DateAxisRenderer,
          tickInterval: '1 day',
          tickOptions:{formatString:'%y/%m/%d'}
      }
  }
});
});</script>
like image 799
Terry Treiberg Avatar asked Jul 10 '11 00:07

Terry Treiberg


1 Answers

You could use the dataRendererOptions parameter to declare possible files, like this:

plo12 = $.jqplot('chart2', jsonurl,{
    title: 'AJAX JSON Data Renderer',
    dataRenderer: ajaxDataRenderer,
    dataRendererOptions: {file1:'name_of_file_1', file2:'name_of_file2'}
    axes: {
      xaxis: {

Next use for-each to iterate trough the dataRendererOptions - Object:

var ajaxDataRenderer = function(url, plot,op) {
    var ret = null;
$.each(op,function(i,n) {
    $.ajax({
        // have to use synchronous here, else returns before data is fetched
        async: false,
        url: url+'/'+i,
        dataType:'json',
        success: function(data) {
            ret[]= data;
        }
    }); //end ajax
 });//end each
return ret;
}

This code is not testet, but the idea behind could fit your needs.

like image 143
The Bndr Avatar answered Jan 04 '23 12:01

The Bndr