The explorer option only works with continuous data type axes, which you do
not have, since you are converting your Dates into strings. I don't know
why the times would change in the second half of your data set, can you
provide an example (with data) that reproduces the problem?
On Sunday, September 21, 2014 8:09:37 AM UTC-4, Schabagh wrote:
>
> Hello again Andrew,
>
> I have another problems. I can't zomm my chart if I use the time groups
> with "DataView":
>
> var view = new window.google.visualization.DataView(data);
> view.setColumns(columns);
>
> explorer: {
> axis: 'horizontal',
> keepInBounds: true,
> maxZoomIn: 0,
> zoomDelta: 1.5,
> },
>
>
> And I have incorrect times if I use nulls to create spaces between the
> groups.
>
> Thanks
>
>
> Am Dienstag, 16. September 2014 01:21:24 UTC+2 schrieb Andrew Gallant:
>
> Is this what you are looking to see?
> http://jsfiddle.net/asgallant/79s3yunf/1/
>
> On Sunday, September 14, 2014 1:31:38 PM UTC-4, Schabagh wrote:
>
> Hi Andrew,
>
> thanks a lot. Very nice. That's exactly what I was looking for. But with a
> width greater than 700px (width: 700) are the X Axis lable no longer
> displayed
> correctly. How can I rotate the lable? The vertical X-axis grid will no
> longer be displayed. Can I show this?
>
> Thanks
>
>
> Am Sonntag, 14. September 2014 14:44:24 UTC+2 schrieb Andrew Gallant:
>
> 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,
>
> ...
--
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.
