How To Line Graph A Timeserie ?

[sco]

Hi there,

 

I wish I could graph the following data, got from a getJson() call to a webservice :

 

{"measures":[{"date_year":"2011","date_month":"1","date_day":"1","date_hour":"19","nb_sessions":"288"},{"date_year":"2011","date_month":"1","date_day":"1","date_hour":"20","nb_sessions":"236"},{"date_year":"2011","date_month":"1","date_day":"1","date_hour":"21","nb_sessions":"224"},{"date_year":"2011","date_month":"1","date_day":"1","date_hour":"22","nb_sessions":"301"},{"date_year":"2011","date_month":"1","date_day":"1","date_hour":"23","nb_sessions":"201"},{"date_year":"2011","date_month":"1","date_day":"2","date_hour":"0","nb_sessions":"121"},{"date_year":"2011","date_month":"1","date_day":"2","date_hour":"1","nb_sessions":"169"},{"date_year":"2011","date_month":"1","date_day":"2","date_hour":"2","nb_sessions":"107"},{"date_year":"2011","date_month":"1","date_day":"2","date_hour":"3","nb_sessions":"69"},{"date_year":"2011","date_month":"1","date_day":"2","date_hour":"4","nb_sessions":"56"},{"date_year":"2011","date_month":"1","date_day":"2","date_hour":"5","nb_sessions":"43"},{"date_year":"2011","date_month":"1","date_day":"2","date_hour":"6","nb_sessions":"40"},{"date_year":"2011","date_month":"1","date_day":"2","date_hour":"7","nb_sessions":"52"},{"date_year":"2011","date_month":"1","date_day":"2","date_hour":"8","nb_sessions":"86"},{"date_year":"2011","date_month":"1","date_day":"2","date_hour":"9","nb_sessions":"172"},{"date_year":"2011","date_month":"1","date_day":"2","date_hour":"10","nb_sessions":"261"},{"date_year":"2011","date_month":"1","date_day":"2","date_hour":"11","nb_sessions":"288"},{"date_year":"2011","date_month":"1","date_day":"2","date_hour":"12","nb_sessions":"291"},{"date_year":"2011","date_month":"1","date_day":"2","date_hour":"13","nb_sessions":"274"},{"date_year":"2011","date_month":"1","date_day":"2","date_hour":"14","nb_sessions":"306"},{"date_year":"2011","date_month":"1","date_day":"2","date_hour":"15","nb_sessions":"437"},{"date_year":"2011","date_month":"1","date_day":"2","date_hour":"16","nb_sessions":"439"}]}

 

(however it could be something like the following :

{"measures":[{"date":"2011-01-01 15:45:02", "nb_sessions":437}, ... {}]}

 

 

To get started, I create a timestamp for each point, and then attach the array to my chart.

 

$.getJSON(  chart.$baseurl+"index.php/ws_query/graph/?startdate="+minXValue+"&enddate="+maxXValue,
                       function(data) {
                           var s = [];

                           $.each(data.measures,function(i,item) {
                               if ( typeof item.date_hour === "undefined" )
                                   item.date_hour = 12;
                               if ( typeof item.date_min === "undefined" )
                                   item.date_min = 0;

                               var unPoint = [ item.date_year+"-"+(item.date_month)+"-"+item.date_day+" "+item.date_hour+":"+item.date_min , item.nb_sessions ];
                               s.push ( unPoint );
                           });

                           FusionCharts.setCurrentRenderer('javascript');

                           var myChart = new FusionCharts( "<?=base_url()?>application/js/ext/fusioncharts/Charts/Column2D.swf", 
                                       "myChartId", "400", "300", "0", "1" );


                           var objJSON = { 
                                           "chart": {
                                               "caption": "Monthly Sales Summary",
                                               "subcaption": "For the year 2004",
                                               "xaxisname": "Month",
                                               "yaxisname": "Sales",
                                               "numberprefix": "{:content:}quot;,
                                               "showlabels": "1",
                                               "showcolumnshadow": "1",
                                               "animation": "1",
                                               "showalternatehgridcolor": "1",
                                               "alternatehgridcolor": "ff5904",
                                               "divlinecolor": "ff5904",
                                               "divlinealpha": "20",
                                               "alternatehgridalpha": "5",
                                               "canvasbordercolor": "666666",
                                               "basefontcolor": "666666",
                                               "linecolor": "FF5904",
                                               "linealpha": "85",
                                               "showvalues": "1",
                                               "rotatevalues": "1",
                                               "valueposition": "auto"
                                           },
                                           "data": s
                                       };


                           myChart.setJSONData( objJSON ); 

                           myChart.render("chartContainerFC");

                       }
                   );                                                  

 

However, from what I understand, there is no direct support for timeseries. Do I need to add categories by hand ? How are time aggregations handled ? All the samples focus on preset month or categories and are not very helpful.

 

Any help for efficiently graphing a time serie would be appreciated.

 

SCO

Edited January 26, 2012 by sco

[Guest Angshu]

Hi,

 

Thanks for your post.

 

I am afraid, FusionCharts does not support date/time data format, as of now.

 

Hope this helps.