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/
On Mon, Apr 13, 2015 at 3:34 PM Aaron Wisher <[email protected]> wrote: > 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. > > > On Monday, April 13, 2015 at 11:58:11 AM UTC-7, Sergey wrote: > >> 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.
