You can use a DataView to convert the strings to "date", "datetime", and/or
"timeofday" data types depending on what you need. In your case, since you
have dates and times, I recommend using a "datetime" data type:
var view = new google.visualization.DataView(data);
// create a formatter to format the dates
var dateFormatter = new google.visualization.DateFormat({pattern: 'dd-MM-yy
HH:mm:ss'});
view.setColumns([{
type: 'datetime',
label: 'Date and Time',
calc: function (dt, row) {
var dateMatch = dt.getValue(row,
0).match(/(\d{2})-(\d{2})-(\d{2})/);
var timeMatch = dt.getValue(row,
1).match(/(\d{2}):(\d{2}):(\d{2})/);
var year = 2000 + dateMatch[3];
var month = parseInt(dateMatch[2], 10) - 1; // subtract 1 to
convert to javascript's zero-indexed months
var day = parseInt(dateMatch[1], 10);
var hours = parseInt(timeMatch[1], 10);
var minutes = parseInt(timeMatch[2], 10);
var seconds = parseInt(timeMatch[3], 10);
var dateTime = new Date(year, month, day, hours, minutes, seconds);
return {v: dateTime, f: dateFormatter.formatValue(dateTime)};
}
}, 2, 3 /* ... rest of columns if necessary */]);
var chart = new
google.visualization.AnnotationChart(document.getElementById('chart1'));
chart.draw(view, options);
Incidentally, your chart options are valid for regular LineCharts, but will
not work with AnnotationCharts. See the list of supported options:
https://developers.google.com/chart/interactive/docs/gallery/annotationchart#Configuration_Options
On Tuesday, June 17, 2014 12:03:20 PM UTC-4, Milan Shrestha wrote:
>
> I am working on WEB based data logger and receiving data in .CSV format.
> My data looks like this:
>
> Date,Time,Direction,Temperature,Wind Speed,Max. Speed,Dev1,a,b,c
>> 17-06-14,15:47:28,67.5,30.50,0.70,3.02,0.91,0.20,0.20,0.00
>> 17-06-14,15:48:28,67.5,30.50,2.98,4.43,0.65,0.20,0.20,0.00
>> 17-06-14,15:49:28,67.5,30.50,1.56,2.41,0.90,0.20,0.20,0.00
>> 17-06-14,15:50:28,67.5,30.50,1.04,1.81,0.79,0.20,0.20,0.00
>> 17-06-14,15:51:28,67.5,30.50,0.22,1.21,0.39,0.20,0.20,0.00
>> 17-06-14,15:52:28,67.5,30.50,0.99,2.21,0.80,0.20,0.20,0.00
>
>
> As shown i received data every seconds so there is lot of data to display
> in single chart, So i want to use Google Annotation Chart but
> problem is that I am using Column 1,2 and 3 and chart doesn't recognize
> column as proper time format and i am not getting any chart.
>
> So is there any way to manipulate the column 1 (EG:15:47:28) to be
> recognizable to Google annotation chart??
>
> i am using jquery.csv to manipualte .CSV data
>
> $.get(fileName, function (csvString) {
>> var arrayData = $.csv.toArrays(csvString, { onParseValue:
>> $.csv.hooks.castToScalar });
>> var data = new google.visualization.arrayToDataTable(arrayData);
>> var options = {
>> title: "NAST web data logger",
>> legend: 'top',
>> hAxis: {
>> title: 'Time', minValue:
>> data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max,
>> ViewWindoMode: 'explicit',
>> viewWindow: {
>> min: 10
>> },
>> gridlines: {
>> color: '#f3f3f3',
>> count: 10
>> },
>> },
>> vAxis: {
>> 0: { title: 'Speed', minValue:
>> data.getColumnRange(3).min, maxValue: data.getColumnRange(3).max, logScale:
>> true },
>> 1: { title: 'Temperature', minValue:
>> data.getColumnRange(4).min, maxValue: data.getColumnRange(4).max, logScale:
>> true }
>> }, series: {
>> 0: { targetAxisIndex: 0 },
>> 1: { targetAxisIndex: 1 },
>> },
>> displayAnnotations: true,
>> //backgroundColor: { fill: 'transparent' }
>> };
>> var chart = new
>> google.visualization.AnnotationChart(document.getElementById('chart1'));
>> chart.draw(view, options);
>
>
> and thanks in advance.
>
>
--
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.
