help formatting hAxis with datetime from CSV

Aaron Wisher

unread,

Apr 13, 2015, 2:50:23 PM4/13/15

to google-visua...@googlegroups.com

I am using the following code to create charts from a CSV file. Can someone help me format the hAxis to only show unique dates and not times? I cannot seem to figure this out without breaking what I already have working.

Thanks.

This is the HTML:

<head>
   <title>Chart Example</title>
   <script src="https://www.google.com/jsapi"></script>
   <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
   <script src="https://jquery-csv.googlecode.com/files/jquery.csv-0.71.js"></script>
   <script type="text/javascript">
   // load the visualization library from Google and set a listener
   google.load("visualization", "1", {packages:["corechart"]});
   google.setOnLoadCallback(drawChartfromCSV);
  
   function drawChartfromCSV(){
     // grab the CSV
         $.get("testbig_DT.csv", function(csvString) {
         // transform the CSV string into a 2-dimensional array
            var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
         // use arrayData to load the select elements with the appropriate options
              for (var i = 1; i < arrayData[0].length; i++) {       // i starts from 1, not 0 because the first column is text
            // this adds the given option to both select elements
              $("select").append("<option value='" + i + "'>" + arrayData[0][i] + "</option");
              }
         // set the default selection
            $("#range option[value='1']").attr("selected","selected");
         // this new DataTable object holds all the data
            var data = new google.visualization.arrayToDataTable(arrayData);
         // this view can select a subset of the data at a time
            var view = new google.visualization.DataView(data);
            view.setColumns([0,1]);
         var options = {
         title: "Some Sensor Data From Somewhere",
          hAxis: {minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max},
          vAxis: {title: "Pressure", viewWindowMode:'explicit', viewWindow:{max:data.getColumnRange(1,2,3,4,5,6).max, min:-25}},
          legend: 'none'
          };
          var chart = new google.visualization.LineChart(document.getElementById('csv2chart'));
          chart.draw(view, options);
          // this part makes the chart interactive
          
          $("select").change(function(){
          
          // determine selected  range - Vertical Axis
          
           var range = +$("#range option:selected").val();
          // update the view
             view.setColumns([0,range]);
          // update the options
          
             options.vAxis.title = data.getColumnLabel(range);
             options.vAxis.minValue = data.getColumnRange(range).min;
             options.vAxis.maxValue = data.getColumnRange(range).max;
             
          // update the chart
             chart.draw(view, options);
          });
         });
   }
   </script>
</head>
<body>
	<DIV>Select the Sensor you want to chart-------> <select id="range">Choose your chart</select></DIV>
   <div id="csv2chart" style="height: 720px; width: 1000px;">
 </div>

</body>

the CSV looks like this:

datetime,sensor01,sensor02,sensor03,sensor04,sensor05,sensor06
2015-03-09 17:15:00,10.09938468,8.277236567,2.131867884,7.52294723,8.84954335,8.685180455
2015-03-09 17:30:00,10.00237983,8.133070783,2.017683456,7.40855765,8.590280579,8.550233455
2015-03-09 17:45:00,9.653160811,7.732607502,1.637066681,7.294167818,8.171468991,8.183946932
2015-03-09 18:00:00,9.420346802,7.524364987,1.370633096,7.389492695,7.991977366,7.933328311
2015-03-09 18:15:00,9.594957409,7.748626112,1.579973897,7.561077035,8.19141247,8.068276953
2015-03-09 18:30:00,9.420346802,7.508346286,1.446757132,7.256037818,7.832428779,7.914049904
2015-03-09 18:45:00,9.284538138,7.348158921,1.275477876,7.084452473,7.652936084,7.759822386
2015-03-09 19:00:00,9.129327792,7.203989736,1.180322463,7.008192139,7.533273972,7.605594399
2015-03-09 19:15:00,9.148729111,7.284083793,1.313539987,7.008192139,7.57316137,7.663429949
2015-03-09 19:30:00,8.974116972,7.043801132,1.161291358,6.817540813,7.2740052,7.509201668
2015-03-09 19:45:00,8.838307116,7.027782236,1.066135712,6.607823548,7.214173777,7.374251537
2015-03-09 20:00:00,8.838307116,6.995744424,1.104197994,6.474366668,7.094510742,7.412808754
2015-03-09 20:15:00,8.663693911,6.883611878,0.970979874,6.340909445,6.974847455,7.25857971
2015-03-09 20:30:00,8.702496897,7.011763334,1.066135712,6.302778747,7.114454598,7.335694291
2015-03-09 20:45:00,8.780102781,7.011763334,1.161291358,6.436236067,6.994791354,7.393530149
2015-03-09 21:00:00,8.760701321,6.979725509,1.123229123,6.226517267,6.954903549,7.374251537

Any help is appreciated.

Sergey Grabkovsky

unread,

Apr 13, 2015, 2:58:11 PM4/13/15

to google-visua...@googlegroups.com

Hi Aaron,

It looks like your "datetime" column is represented as a string. This will cause your 'datetime' axis to be discrete, instead of continuous. It will also make it near impossible to format your dates. To solve this, you will need to parse your dates and turn them into actual JavaScript Date objects. I strongly recommend for the sake of robustness that you use a third party library to do this for you. I think moment.js is fairly decent.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Aaron Wisher

unread,

Apr 13, 2015, 3:33:59 PM4/13/15

to google-visua...@googlegroups.com

Yes, that is kind of what I figured. I've placed the moment.js file on the server and tried to put it in the code, but I'm not familiar enough with Java yet to be sure where to add it.

hAxis: {minValue: (moment(data.getColumnRange(0).min),"MM/DD"), maxValue: (moment(data.getColumnRange(0).max),"MM/DD")},

Maybe it goes earlier when I am creating the data table? When I add the above line, nothing changes.

Sergey Grabkovsky

unread,

Apr 13, 2015, 3:43:26 PM4/13/15

to google-visua...@googlegroups.com

Yes, the above wouldn't do anything. You need to modify each individual value in your DataTable. You could do this by creating a DataView and using its 'calc' column feature. I also don't think you want to use the raw 'moment' object; I think you want to extract the date from it. You can do this by calling .toDate() on the moment object. Here is a basic example: http://jsfiddle.net/4wy4502o/

--

Reply all

Reply to author

Forward