Hi Andrew,
thanks for your reply and sorry for delay.
That is correct. I get my data via JSON from MVC to ajax (JavaScript). I
have checked the type of my data "valueObject[y][x].myValueField" with
alert(typeof(valueObject[y][x].myValueField)) and that is a 'number'. But I
have tried nevertheless convert my data into a number. I have the following
error as you can see (Error1) if I try:
var myData = window.google.visualization.arrayToDataTable(data);
and I can't locate this error.
In addition I use this part no longer:
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)
});
}
and I can zooming my chart now as before. The indicate of time on my X-Axis
seems even without this area to work (06:00 09:00 12:00 15:00 ... ).
As I said, I have a problem with the spacing between of groups.
Thanks
Am Dienstag, 23. September 2014 02:21:04 UTC+2 schrieb Andrew Gallant:
>
> At a guess, I would say that your array contains strings instead of
> numbers, which would break the chart when you use the #arrayToDataTable
> function, as it would interpret those data series as string types and not
> number types. You should fix this in the code you use to pull data from
> the database. I see this effect often from users pulling data from MySQL
> in PHP, and the fix there is to use the JSON_NUMERIC_CHECK parameter when
> encoding the output as JSON:
>
> echo json_encode($myData, JSON_NUMERIC_CHECK);
>
> You can also fix this on the client side by parsing the data as numbers,
> on this line:
>
> values.push(valueObject[y][x].myValueField);
>
> like this:
>
> values.push(new Number(valueObject[y][x].myValueField));
>
> On Saturday, September 20, 2014 2:08:33 PM UTC-4, Schabagh wrote:
>>
>> Hi Andrew,
>>
>> I get my data from a database added in an two-dimensional array for test
>> purposes:
>>
>> for (var t = 0; t < 2; t++) {
>> for (var x = 0; x < valueObject[0].length; x++) {
>> var timeStamp = new Date(parseInt(valueObject[0][x].
>> TimeStamp.substr(6)));
>> var values = new Array(timeStamp);
>>
>> for (var y = 0; y < valueObject.length; y++)
>> values.push(valueObject[y][x].myValueField);
>>
>> data.push(values);
>> }
>>
>> data.push([null, null, null, null]);
>> }
>>
>>
>>
>> I tray to add a null row to the end of each data groups. My date format
>> is like this: "Sun Mar 03 2013 06:57:00 GMT+0100", and I have this error
>> message: "Data column(s) for axis #0 cannot be of type string"
>>
>>
>> var myData = window.google.visualization.arrayToDataTable(data);
>> var view = new window.google.visualization.DataView(myData);
>> view.setColumns(columns);
>>
>> var chart = new window.google.visualization.LineChart(document.
>> querySelector('#chart'));
>> chart.draw(view, options);
>>
>>
>>
>> I can't indicate the Line Chart and the Curve 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 Datatabl
>>
>> ...
>
>
--
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.
