Oh, I see now. Your first data set was close to what you want, you need to
add a row containing nulls for all values in between each group:
var data = google.visualization.arrayToDataTable([
['Date', 'Value1', 'Value2', 'Value3', 'Value4'],
['2014-06-11 03:14:00.000', 1336060, 400361, 1001582, 997974],
['2014-06-11 03:15:00.000', 1538156, 366849, 1119450, 941795],
['2014-06-11 03:16:00.000', 1576579, 440514, 993360, 930593],
['2014-06-11 03:17:00.000', 1600652, 434552, 1004163, 897127],
['2014-06-11 03:18:00.000', 1968113, 393032, 979198, 1080887],
['2014-06-11 03:19:00.000', 1901067, 517206, 916965, 1056036],
['', null, null, null, null],
['2014-06-12 03:14:00.000', 1336060, 400361, 1001582, 997974],
['2014-06-12 03:15:00.000', 1538156, 366849, 1119450, 941795],
['2014-06-12 03:16:00.000', 1576579, 440514, 993360, 930593],
['2014-06-12 03:17:00.000', 1600652, 434552, 1004163, 897127],
['2014-06-12 03:18:00.000', 1968113, 393032, 979198, 1080887],
['2014-06-12 03:19:00.000', 1901067, 517206, 916965, 1056036],
['', null, null, null, null],
['2014-06-13 03:14:00.000', 1336060, 400361, 1001582, 997974],
['2014-06-13 03:15:00.000', 1538156, 366849, 1119450, 941795],
['2014-06-13 03:16:00.000', 1576579, 440514, 993360, 930593],
['2014-06-13 03:17:00.000', 1600652, 434552, 1004163, 897127],
['2014-06-13 03:18:00.000', 1968113, 393032, 979198, 1080887],
['2014-06-13 03:19:00.000', 1901067, 517206, 916965, 1056036]
]);
This will give you the grouping and spacing that you want. The axis values
will be whatever strings you have in the first column, so in this case,
they will contain the dates as well as times. If you need dates as well as
times in the tooltips, then you will have to create custom tooltips.
Here's an example of how you can use a DataView to put your first column
in the appropriate format and dynamically create the tooltips:
var columns = [{
type: 'string',
label: data.getColumnLabel(0),
calc: function (dt, row) {
try {
var dateTime = dt.getValue(row, 0);
var dateArr = dateTime.split(' ');
var timeArr = dateArr[1].split(':');
return timeArr[0] + ':' + timeArr[1];
}
catch (e) {
return '';
}
}
}];
for (var i = 1; i < data.getNumberOfColumns(); i++) {
columns.push(i);
columns.push({
type: 'string',
role: 'tooltip',
calc: (function (x) {
return function (dt, row) {
var dateTime = dt.getValue(row, 0);
var value = dt.getFormattedValue(row, x);
var valueLabel = dt.getColumnLabel(x);
return dateTime + '\n' + valueLabel + ': ' + value;
}
})(i)
});
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
Use the view instead of the DataTable to draw your chart, see this example:
http://jsfiddle.net/asgallant/79s3yunf/
On Saturday, September 13, 2014 1:51:20 PM UTC-4, Schabagh wrote:
>
> Hi,
>
> thanks. Sorry but that's not what I want. I need a time group that repeats,
> exactly as you see it in the picture above.
>
>
> |--The first group of curves--| Space |-The second group of curves-|
> ------------------------------------X-AXIS-------------------------------
> 0.00 ... 6.00 ... 12.00 ... 18.00 0.00 ... 6.00 ... 12.00 ... 18.00
>
>
> Is that possible?
>
> Thanks
>
>
>
>
> Am Samstag, 13. September 2014 18:45:46 UTC+2 schrieb Andrew Gallant:
>
> If you don't need the date for anything, you could switch your first
> column to a "timeofday" data type, which would align all of your data on a
> single span of hours, regardless of day:
>
> var data = google.visualization.arrayToDataTable([
> ['Date', 'Value1', 'Value2', 'Value3', 'Value4'],
> [[3, 14, 0, 0], 1336060, 400361, 1001582, 997974],
> [[3, 15, 0, 0], 1538156, 366849, 1119450, 941795],
> [[3, 16, 0, 0], 1576579, 440514, 993360, 930593],
> [[3, 17, 0, 0], 1600652, 434552, 1004163, 897127],
> [[3, 18, 0, 0], 1968113, 393032, 979198, 1080887],
> [[3, 19, 0, 0], 1901067, 517206, 916965, 1056036],
>
> [[3, 14, 0, 0], 1336060, 400361, 1001582, 997974],
> [[3, 15, 0, 0], 1538156, 366849, 1119450, 941795],
> [[3, 16, 0, 0], 1576579, 440514, 993360, 930593],
> [[3, 17, 0, 0], 1600652, 434552, 1004163, 897127],
> [[3, 18, 0, 0], 1968113, 393032, 979198, 1080887],
> [[3, 19, 0, 0], 1901067, 517206, 916965, 1056036],
>
> [[3, 14, 0, 0], 1336060, 400361, 1001582, 997974],
> [[3, 15, 0, 0], 1538156, 366849, 1119450, 941795],
> [[3, 16, 0, 0], 1576579, 440514, 993360, 930593],
> [[3, 17, 0, 0], 1600652, 434552, 1004163, 897127],
> [[3, 18, 0, 0], 1968113, 393032, 979198, 1080887],
> [[3, 19, 0, 0], 1901067, 517206, 916965, 1056036]
> ]);
>
> The data format for "timeofday" is an array in the form [hours, minutes,
> seconds, milliseconds].
>
> On Saturday, September 13, 2014 2:43:19 AM UTC-4, Schabagh wrote:
>
> Hi Andrew,
>
> sorry, that is correct. But look at the x-axis in the picture please.As
> yor see the times are repeated in the middle of the X-axis.
>
> 0.00 ... 6.00 ... 12.00 ... 18.00 ... 0.00 ... 6.00 ... 12.00 ... 18.00
>
> but I have with my data only one time line (it means 0.00 ... 6.00 ...
> 12.00 ... 18.00) on the X-Axis like this, where all curves are indicated
> at 0.00 on the left:
>
> 0.00 ............. 6.00 ............. 12.00 ............. 18.00
>
> How can I add the data in the Datatable-Aarray so I can indicate the data
> as shown in the picture? Is that even possible with the Google Chart.
>
> Thanks
>
>
>
> Am Samstag, 13. September 2014 00:48:13 UTC+2 schrieb Andrew Gallant:
>
> I don't understand what it is you would like to do. How does your example
> image relate to your data? What do you mean by only 1 curve instead of 5
> (your data as-is should produce a LineChart with 4 lines)?
>
> On Friday, September 12, 2014 9:04:31 AM UTC-4, Schabagh wrote:
>
> Hi,
>
> how can I indicate die information of e.g. 5 days with the same/repetitive
> times (X-Axis) with a line chart correctly, only with one curve and not
> with 5 different curves? For example:
>
> Code hier eingeben...var data = google.visualization.arrayToDataTable([
> ['Date', 'Value1', 'Value2', 'Value3', 'Value4'],
> ['2014-06-11 03:14:00.000', 1336060, 400361, 1001582,
> 997974],
> ['2014-06-11 03:15:00.000', 1538156, 366849, 1119450,
> 941795],
> ['2014-06-11 03:16:00.000', 1576579, 440514, 993360,
> 930593],
> ['2014-06-11 03:17:00.000', 1600652, 434552, 1004163,
> 897127],
> ['2014-06-11 03:18:00.000', 1968113, 393032, 979198,
> 1080887],
> ['2014-06-11 03:19:00.000', 1901067, 517206, 916965,
> 1056036],
>
> ['2014-06-12 03:14:00.000', 1336060, 400361, 1001582,
> 997974],
> ['2014-06-12 03:15:00.000', 1538156, 366849, 1119450,
> 941795],
> ['2014-06-12 03:16:00.000', 1576579, 440514, 993360,
> 930593],
> ['2014-06-12 03:17:00.000', 1600652, 434552, 1004163,
> 897127],
> ['2014-06-12 03:18:00.000', 1968113, 393032, 979198,
> 1080887],
> ['2014-06-12 03:19:00.000', 1901067, 517206, 916965,
> 1056036],
>
> ['2014-06-13 03:14:00.000', 1336060, 400361, 1001582,
> 997974],
> ['2014-0
>
> ...
--
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.
