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.
On Mon, Apr 13, 2015 at 2:50 PM Aaron Wisher <[email protected]> wrote: > 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. > > -- > 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 [email protected]. > To post to this group, send email to > [email protected]. > Visit this group at > http://groups.google.com/group/google-visualization-api. > For more options, visit https://groups.google.com/d/optout. > -- 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 [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
