Related
An example is here: https://jsfiddle.net/beo4qjsg/1/
It's essentially the same code used for "Multiple line types" example in Google Charts documentation, with one change. Specifically, I have the following in options:
var options = {
width: 1000, height: 850,
chartArea: {left:75, top:75, height:450, width:550},
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
},
series: {
1: {curveType: 'function'}
}
};
The output image looks like this:
As can be seen here, the title for X-axis "Time" is quite far from the axis itself. Is there any way to bring it closer? It is important that I keep the chartArea.height set to a specific value, so that's something I cannot change.
in the option for chartArea, add an option for bottom
chartArea: {left:75, top:75, width:550, bottom: 40, height: '100%'},
see following working snippet...
google.charts.load('current', {
packages: ['corechart', 'line']
}).then(function() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Cats');
data.addRows([
[0, 0, 0], [1, 10, 5], [2, 23, 15], [3, 17, 9], [4, 18, 10], [5, 9, 5],
[6, 11, 3], [7, 27, 19], [8, 33, 25], [9, 40, 32], [10, 32, 24], [11, 35, 27],
[12, 30, 22], [13, 40, 32], [14, 42, 34], [15, 47, 39], [16, 44, 36], [17, 48, 40],
[18, 52, 44], [19, 54, 46], [20, 42, 34], [21, 55, 47], [22, 56, 48], [23, 57, 49],
[24, 60, 52], [25, 50, 42], [26, 52, 44], [27, 51, 43], [28, 49, 41], [29, 53, 45],
[30, 55, 47], [31, 60, 52], [32, 61, 53], [33, 59, 51], [34, 62, 54], [35, 65, 57],
[36, 62, 54], [37, 58, 50], [38, 55, 47], [39, 61, 53], [40, 64, 56], [41, 65, 57],
[42, 63, 55], [43, 66, 58], [44, 67, 59], [45, 69, 61], [46, 69, 61], [47, 70, 62],
[48, 72, 64], [49, 68, 60], [50, 66, 58], [51, 65, 57], [52, 67, 59], [53, 70, 62],
[54, 71, 63], [55, 72, 64], [56, 73, 65], [57, 75, 67], [58, 70, 62], [59, 68, 60],
[60, 64, 56], [61, 60, 52], [62, 65, 57], [63, 67, 59], [64, 68, 60], [65, 69, 61],
[66, 70, 62], [67, 72, 64], [68, 75, 67], [69, 80, 72]
]);
var options = {
width: 1000, height: 850,
chartArea: {left:75, top:75, width:550, bottom: 40, height: '100%'},
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
},
series: {
1: {curveType: 'function'}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I'm a beginner in the Apps Script environment.
While testing to learn about methods and configuration options, I came across a problem for which I couldn't find a solution.
After changing the chartArea option, depending on the value, the hAxis ticks disappear.
As an example taken directly from the google guide page, I have this snippet:
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Cats');
data.addRows([
[0, 0, 0], [1, 10, 5], [2, 23, 15], [3, 17, 9], [4, 18, 10], [5, 9, 5],
[6, 11, 3], [7, 27, 19], [8, 33, 25], [9, 40, 32], [10, 32, 24], [11, 35, 27],
[12, 30, 22], [13, 40, 32], [14, 42, 34], [15, 47, 39], [16, 44, 36], [17, 48, 40],
[18, 52, 44], [19, 54, 46], [20, 42, 34], [21, 55, 47], [22, 56, 48], [23, 57, 49],
[24, 60, 52], [25, 50, 42], [26, 52, 44], [27, 51, 43], [28, 49, 41], [29, 53, 45],
[30, 55, 47], [31, 60, 52], [32, 61, 53], [33, 59, 51], [34, 62, 54], [35, 65, 57],
[36, 62, 54], [37, 58, 50], [38, 55, 47], [39, 61, 53], [40, 64, 56], [41, 65, 57],
[42, 63, 55], [43, 66, 58], [44, 67, 59], [45, 69, 61], [46, 69, 61], [47, 70, 62],
[48, 72, 64], [49, 68, 60], [50, 66, 58], [51, 65, 57], [52, 67, 59], [53, 70, 62],
[54, 71, 63], [55, 72, 64], [56, 73, 65], [57, 75, 67], [58, 70, 62], [59, 68, 60],
[60, 64, 56], [61, 60, 52], [62, 65, 57], [63, 67, 59], [64, 68, 60], [65, 69, 61],
[66, 70, 62], [67, 72, 64], [68, 75, 67], [69, 80, 72]
]);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
},
series: {
1: {curveType: 'function'}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
If I modify the given example, including the following configuration: chartArea: {left: 70, width:'90%', height:'90%'}, the hAxis ticks just disappear, as we can see in the next snippet.
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Cats');
data.addRows([
[0, 0, 0], [1, 10, 5], [2, 23, 15], [3, 17, 9], [4, 18, 10], [5, 9, 5],
[6, 11, 3], [7, 27, 19], [8, 33, 25], [9, 40, 32], [10, 32, 24], [11, 35, 27],
[12, 30, 22], [13, 40, 32], [14, 42, 34], [15, 47, 39], [16, 44, 36], [17, 48, 40],
[18, 52, 44], [19, 54, 46], [20, 42, 34], [21, 55, 47], [22, 56, 48], [23, 57, 49],
[24, 60, 52], [25, 50, 42], [26, 52, 44], [27, 51, 43], [28, 49, 41], [29, 53, 45],
[30, 55, 47], [31, 60, 52], [32, 61, 53], [33, 59, 51], [34, 62, 54], [35, 65, 57],
[36, 62, 54], [37, 58, 50], [38, 55, 47], [39, 61, 53], [40, 64, 56], [41, 65, 57],
[42, 63, 55], [43, 66, 58], [44, 67, 59], [45, 69, 61], [46, 69, 61], [47, 70, 62],
[48, 72, 64], [49, 68, 60], [50, 66, 58], [51, 65, 57], [52, 67, 59], [53, 70, 62],
[54, 71, 63], [55, 72, 64], [56, 73, 65], [57, 75, 67], [58, 70, 62], [59, 68, 60],
[60, 64, 56], [61, 60, 52], [62, 65, 57], [63, 67, 59], [64, 68, 60], [65, 69, 61],
[66, 70, 62], [67, 72, 64], [68, 75, 67], [69, 80, 72]
]);
var options = {
hAxis: {
title: 'Time'
},
chartArea: {left: 70, width:'90%', height:'90%'},
vAxis: {
title: 'Popularity'
},
series: {
1: {curveType: 'function'}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Depending on the value of the height parameter, the ticks appear again and I couldn't understand why increasing the graph area implies omitting the hAxis ticks.
Can someone help me?
Thanks.
Default chartArea.height = 200
Default height = chartArea.height = 200
chartArea.height: 90% -> 180
200- 180 = 20px is not enough for the hAxis that it is out of the display region.
You should reduce chartArea.height or increase height.
I wanted to show my graph but in a vertical way not horizontal like show on the following image and also hide the legend if possible.
Thanks in advance for your help.
Charts horizontal to vertical
Symmetry of the rotation
google.charts.load('current', {packages: ['corechart', 'line']}); google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
[18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
[24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
[30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
[36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
[42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
[48, 72], [49, 68], [50, 66],
]);
var options = {
hAxis: {
textPosition:"none"
},
vAxis: {
textPosition:"none"
},
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'))
chart.draw(data, options);
}
use chart options...
orientation: 'vertical'
and...
legend.position: 'none'
see the following working snippet...
it also demonstrates increasing the size of the chartArea to fill the container
which the chart will not do by default...
chartArea: {
top: 6,
right: 6,
bottom: 6,
left: 6,
height: '100%',
width: '100%'
},
google.charts.load('current', {
callback: drawBasic,
packages:['corechart']
});
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
[18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
[24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
[30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
[36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
[42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
[48, 72], [49, 68], [50, 66],
]);
var options = {
chartArea: {
top: 6,
right: 6,
bottom: 6,
left: 6,
height: '100%',
width: '100%'
},
hAxis: {
textPosition: 'none'
},
height: 800,
legend: {
position: 'none'
},
orientation: 'vertical',
vAxis: {
textPosition: 'none'
},
width: 200
};
var chart0 = new google.visualization.LineChart(document.getElementById('chart_div0'));
chart0.draw(data, options);
var view = new google.visualization.DataView(data);
view.setColumns([0, {
calc: function (dt, row) {
return {
v: dt.getValue(row, 1) * -1,
f: dt.getFormattedValue(row, 1),
};
},
label: data.getColumnLabel(1),
type: data.getColumnType(1)
}]);
var chart1 = new google.visualization.LineChart(document.getElementById('chart_div1'));
chart1.draw(view, options);
}
div {
display: inline-block;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div0"></div>
<div id="chart_div1"></div>
you can achieve this with css (and add legend: {position: 'none'} in the options to hide the legend)
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
[18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
[24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
[30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
[36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
[42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
[48, 72], [49, 68], [50, 66],
]);
var options = {
hAxis: {
textPosition:"none"
},
vAxis: {
textPosition:"none"
},
legend: {position: 'none'}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'))
chart.draw(data, options);
}
#chart_div{
transform-origin: 80% 50%;
transform:rotate(-90deg);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I would like to have a map of Ho Chi Minh City in Vietnam and give values to specific districts. I wonder if there is a possibility in doing so using geochart.
Thanks!
No, not currently. From the docs about the resolution setting, there is no resolution for city districts, and the highest definition is metros which isn't supported outside of the US.
'countries' - Supported for all regions, except for US state regions.
'provinces' - Supported only for country regions and US state regions. Not supported for all countries; please test a country to see whether this option is supported.
'metros' - Supported for the US country region and US state regions only.
However, the different provinces of Vietnam can be used with the following code:
google.load('visualization', '1', {
'packages': ['geochart']
});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['State', 'Value'],
['Bắc Giang', 1],
['Bắc Kạn', 2],
['Cao Bằng', 3],
['Hà Giang', 4],
['Lạng Sơn', 5],
['Phú Thọ', 6],
['Quảng Ninh', 7],
['Thái Nguyên', 8],
['Tuyên Quang', 9],
['Lào Cai', 10],
['Yên Bái', 11],
['Điện Biên', 12],
['Hòa Bình', 13],
['Lai Châu', 14],
['Sơn La', 15],
['Bắc Ninh', 16],
['Hà Nam', 17],
['Hải Dương', 18],
['Hưng Yên', 19],
['Nam Định', 20],
['Ninh Bình', 21],
['Thái Bình', 22],
['Vĩnh Phúc', 23],
['Hà Nội City', 24],
['Hải Phòng City', 25],
['Hà Tĩnh', 26],
['Nghệ An', 27],
['Quảng Bình', 28],
['Quảng Trị', 29],
['Thanh Hóa', 30],
['Thừa Thiên–Huế', 31],
['Đắk Lắk', 32],
['Đắk Nông', 33],
['Gia Lai', 34],
['Kon Tum', 35],
['Lâm Đồng', 36],
['Bình Định', 37],
['Bình Thuận', 38],
['Khánh Hòa', 39],
['Ninh Thuận', 40],
['Phú Yên', 41],
['Quảng Nam', 42],
['Quảng Ngãi', 43],
['Đà Nẵng City', 44],
['Bà Rịa–Vũng Tàu', 45],
['Bình Dương', 46],
['Bình Phước', 47],
['Đồng Nai', 48],
['Tây Ninh', 49],
['Hồ Chí Minh City', 50],
['An Giang', 51],
['Bạc Liêu', 52],
['Bến Tre', 53],
['Cà Mau', 54],
['Đồng Tháp', 55],
['Hậu Giang', 56],
['Kiên Giang', 57],
['Long An', 58],
['Sóc Trăng', 59],
['Tiền Giang', 60],
['Trà Vinh', 61],
['Vĩnh Long', 62],
['VN-CT', 63],
['VN-DN', 64]
]);
var opts = {
region: 'VN',
displayMode: 'regions',
resolution: 'provinces',
};
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
geochart.draw(data, opts);
};
JSFiddle
If you notice that Ho Chi Minh City or Ha Noi are missing in this map. For example, I have to use Region Code "VN-SG" instead of "Ho Chi Minh", this take me lots of time to figure out. Here is full Vietnames Geo Chart Region :)
var data = google.visualization.arrayToDataTable([
['State', 'Value'],
['Bắc Giang', 1],
['Bắc Kạn', 2],
['Cao Bằng', 3],
['Hà Giang', 4],
['Lạng Sơn', 5],
['Phú Thọ', 6],
['Quảng Ninh', 7],
['Thái Nguyên', 8],
['Tuyên Quang', 9],
['Lào Cai', 10],
['Yên Bái', 11],
['Điện Biên', 12],
['Hòa Bình', 13],
['Lai Châu', 14],
['Sơn La', 15],
['Bắc Ninh', 16],
['Hà Nam', 17],
['Hải Dương', 18],
['Hưng Yên', 19],
['Nam Định', 20],
['Ninh Bình', 21],
['Thái Bình', 22],
['Vĩnh Phúc', 23],
['VN-HN', 24],
['Hải Phòng City', 25],
['Hà Tĩnh', 26],
['Nghệ An', 27],
['Quảng Bình', 28],
['Quảng Trị', 29],
['Thanh Hóa', 30],
['Thừa Thiên–Huế', 31],
['Đắk Lắk', 32],
['VN-72', 33],
['Gia Lai', 34],
['Kon Tum', 35],
['Lâm Đồng', 36],
['Bình Định', 37],
['Bình Thuận', 38],
['Khánh Hòa', 39],
['Ninh Thuận', 40],
['Phú Yên', 41],
['Quảng Nam', 42],
['Quảng Ngãi', 43],
['Đà Nẵng City', 44],
['Bà Rịa–Vũng Tàu', 45],
['Bình Dương', 46],
['Bình Phước', 47],
['Đồng Nai', 48],
['Tây Ninh', 49],
['VN-SG', 50],
['An Giang', 51],
['VN-55', 52],
['Bến Tre', 53],
['Cà Mau', 54],
['Đồng Tháp', 55],
['Hậu Giang', 56],
['Kiên Giang', 57],
['Long An', 58],
['Sóc Trăng', 59],
['Tiền Giang', 60],
['Trà Vinh', 61],
['Vĩnh Long', 62],
['VN-CT', 63],
['VN-DN', 63]]);
I have this JSON code:
{"data":[{"vreme":"2015-09-29 19:07:23","cena":1100,"utovar":"2015-09-30","istovar":"2015-10-01","poruka":""},{"vreme":"2015-09-29 18:41:06","cena":3453,"utovar":"2015-09-29","istovar":"2015-09-29","poruka":"sve ukljuceno u cenu"},{"vreme":"2015-09-29 16:32:57","cena":1200,"utovar":"","istovar":"","poruka":"+magacin"},{"vreme":"2015-09-29 17:43:58","cena":3400,"utovar":"2015-09-29","istovar":"2015-09-30","poruka":"+skladiste + niza cena + tacan da tum utovara"},{"vreme":"2015-09-29 19:07:31","cena":1100,"utovar":"2015-09-30","istovar":"2015-10-01","poruka":""},{"vreme":"2015-09-29 19:44:12","cena":1099,"utovar":"2015-09-29","istovar":"2015-09-29","poruka":"niza ponuda"},{"vreme":"2015-09-29 20:10:02","cena":520,"utovar":"2015-09-29","istovar":"2015-09-30","poruka":"+magacin"},{"vreme":"2015-09-29 21:05:22","cena":500,"utovar":"2015-09-29","istovar":"2015-09-29","poruka":""},{"vreme":"2015-09-29 21:09:21","cena":499,"utovar":"2015-09-29","istovar":"2015-09-29","poruka":"All Invlusive"},{"vreme":"2015-09-29 21:10:42","cena":450,"utovar":"2015-09-29","istovar":"2015-09-29","poruka":"Ukljucen rucak za 2 osobe"},{"vreme":"2015-09-29 21:12:40","cena":440,"utovar":"2015-09-29","istovar":"2015-09-29","poruka":"I razvoz po gradu sa manjim kombijem"},{"vreme":"2015-09-29 21:14:08","cena":7500,"utovar":"2015-09-29","istovar":"2015-09-29","poruka":"Prevoz u pozlacenim posudama od srebra"},{"vreme":"2015-09-29 21:16:36","cena":999,"utovar":"2015-09-15","istovar":"2015-09-30","poruka":"Electro Truck Shipment - Clima Cargo"},{"vreme":"2015-09-29 21:18:42","cena":439,"utovar":"2015-09-15","istovar":"2015-09-30","poruka":"10 u pola sa lukom i 2 piva"},{"vreme":"2015-09-29 21:19:46","cena":438,"utovar":"2015-09-15","istovar":"2015-09-30","poruka":"Mica shiping&pushing"},{"vreme":"2015-09-29 21:21:16","cena":430,"utovar":"2015-09-15","istovar":"2015-09-30","poruka":"Celo selo šmr\u010de belo - TRANS"},{"vreme":"2015-09-29 21:21:47","cena":437,"utovar":"2015-09-29","istovar":"2015-09-29","poruka":""},{"vreme":"2015-09-29 21:21:57","cena":400,"utovar":"2015-09-29","istovar":"2015-09-29","poruka":""},{"vreme":"2015-09-29 21:22:59","cena":425,"utovar":"2015-09-15","istovar":"2015-09-30","poruka":"https:\/\/www.youtube.com\/watch?v=X3YIzdTGbX8"},{"vreme":"2015-09-29 21:25:55","cena":399,"utovar":"2015-09-15","istovar":"2015-09-30","poruka":"Free of charge two immigrants in blind box under load space"},{"vreme":"2015-09-29 21:26:23","cena":380,"utovar":"2015-09-29","istovar":"2015-09-29","poruka":"moze na odlozeno"},{"vreme":"2015-09-29 21:28:47","cena":350,"utovar":"2015-09-15","istovar":"2015-09-30","poruka":"+ dozen immigrants with free food & beer with comfort seater "},{"vreme":"2015-09-29 21:30:24","cena":330,"utovar":"2015-09-15","istovar":"2015-09-30","poruka":"Shipment with Space X rocket directly to Mars + back"},{"vreme":"2015-09-29 22:06:01","cena":320,"utovar":"2015-09-15","istovar":"2015-09-30","poruka":"Loading and shiping"},{"vreme":"2015-09-29 22:09:26","cena":0,"utovar":"2015-09-29","istovar":"2015-09-29","poruka":"a taman sam hteo da ponudim besplatno"},{"vreme":"2015-09-29 22:13:42","cena":-100,"utovar":"2015-09-29","istovar":"2015-10-30","poruka":""},{"vreme":"2015-09-29 22:26:13","cena":-9999,"utovar":"2015-09-15","istovar":"2015-09-30","poruka":"Truck Track rules"},{"vreme":"2015-09-30 00:02:06","cena":-10000,"utovar":"2015-09-30","istovar":"2015-09-30","poruka":""},{"vreme":"2015-09-30 00:07:53","cena":-10001,"utovar":"2015-09-30","istovar":"2015-09-30","poruka":"cvrc:D"},{"vreme":"2015-09-30 08:34:53","cena":1000,"utovar":"2015-09-30","istovar":"2015-09-30","poruka":""}]}
Also I have this google visualisation api code:
https://jsfiddle.net/Lus7z2q6/
So how I can transform my JSON file to looks like this:
data.addRows([
[0, 0], [1, 100], [2, 23], [3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
[18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
[24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
[30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
[36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
[42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
[48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
[54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
[60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69],
[66, 70], [67, 72], [68, 75], [69, 80]
]);
where array is [data.vreme[0],data.cena[0]] ,[data.vreme[1],data.cena[1]]...
How to transform my JSON to looks like this array or how to use JSON in this format for google visualisation api?
In this I inserted "data.vreme[0]" converted in seconds by Date.prototype.valueOf()
var JSONstring = {"data":[{"vreme":"2015-09-29 09:07:23","cena":1100,"utovar":"2015-09-30","istovar":"2015-10-01","poruka":""},{"vreme":"2015-09-29 12:41:06","cena":3453,"utovar":"2015-09-29","istovar":"2015-09-29","poruka":"sve ukljuceno u cenu"},{"vreme":"2015-09-29 16:32:57","cena":1200,"utovar":"","istovar":"","poruka":"+magacin"},{"vreme":"2015-09-29 17:43:58","cena":3400,"utovar":"2015-09-29","istovar":"2015-09-30","poruka":"+skladiste + niza cena + tacan da tum utovara"},{"vreme":"2015-09-29 19:07:31","cena":1100,"utovar":"2015-09-30","istovar":"2015-10-01","poruka":""},{"vreme":"2015-09-29 19:44:12","cena":1099,"utovar":"2015-09-29","istovar":"2015-09-29","poruka":"niza ponuda"},{"vreme":"2015-09-29 20:10:02","cena":520,"utovar":"2015-09-29","istovar":"2015-09-30","poruka":"+magacin"},{"vreme":"2015-09-29 21:05:22","cena":500,"utovar":"2015-09-29","istovar":"2015-09-29","poruka":""},{"vreme":"2015-09-29 21:09:21","cena":499,"utovar":"2015-09-29","istovar":"2015-09-29","poruka":"All Invlusive"},{"vreme":"2015-09-29 21:10:42","cena":450,"utovar":"2015-09-29","istovar":"2015-09-29","poruka":"Ukljucen rucak za 2 osobe"},{"vreme":"2015-09-29 21:12:40","cena":440,"utovar":"2015-09-29","istovar":"2015-09-29","poruka":"I razvoz po gradu sa manjim kombijem"},{"vreme":"2015-09-29 21:14:08","cena":7500,"utovar":"2015-09-29","istovar":"2015-09-29","poruka":"Prevoz u pozlacenim posudama od srebra"},{"vreme":"2015-09-29 21:16:36","cena":999,"utovar":"2015-09-15","istovar":"2015-09-30","poruka":"Electro Truck Shipment - Clima Cargo"},{"vreme":"2015-09-29 21:18:42","cena":439,"utovar":"2015-09-15","istovar":"2015-09-30","poruka":"10 u pola sa lukom i 2 piva"},{"vreme":"2015-09-29 21:19:46","cena":438,"utovar":"2015-09-15","istovar":"2015-09-30","poruka":"Mica shiping&pushing"},{"vreme":"2015-09-29 21:21:16","cena":430,"utovar":"2015-09-15","istovar":"2015-09-30","poruka":"Celo selo šmr\u010de belo - TRANS"},{"vreme":"2015-09-29 21:21:47","cena":437,"utovar":"2015-09-29","istovar":"2015-09-29","poruka":""},{"vreme":"2015-09-29 21:21:57","cena":400,"utovar":"2015-09-29","istovar":"2015-09-29","poruka":""},{"vreme":"2015-09-29 21:22:59","cena":425,"utovar":"2015-09-15","istovar":"2015-09-30","poruka":"https:\/\/www.youtube.com\/watch?v=X3YIzdTGbX8"},{"vreme":"2015-09-29 21:25:55","cena":399,"utovar":"2015-09-15","istovar":"2015-09-30","poruka":"Free of charge two immigrants in blind box under load space"},{"vreme":"2015-09-29 21:26:23","cena":380,"utovar":"2015-09-29","istovar":"2015-09-29","poruka":"moze na odlozeno"},{"vreme":"2015-09-29 21:28:47","cena":350,"utovar":"2015-09-15","istovar":"2015-09-30","poruka":"+ dozen immigrants with free food & beer with comfort seater "},{"vreme":"2015-09-29 21:30:24","cena":330,"utovar":"2015-09-15","istovar":"2015-09-30","poruka":"Shipment with Space X rocket directly to Mars + back"},{"vreme":"2015-09-29 22:06:01","cena":320,"utovar":"2015-09-15","istovar":"2015-09-30","poruka":"Loading and shiping"},{"vreme":"2015-09-29 22:09:26","cena":0,"utovar":"2015-09-29","istovar":"2015-09-29","poruka":"a taman sam hteo da ponudim besplatno"},{"vreme":"2015-09-29 22:13:42","cena":-100,"utovar":"2015-09-29","istovar":"2015-10-30","poruka":""},{"vreme":"2015-09-29 22:26:13","cena":-9999,"utovar":"2015-09-15","istovar":"2015-09-30","poruka":"Truck Track rules"},{"vreme":"2015-09-30 00:02:06","cena":-10000,"utovar":"2015-09-30","istovar":"2015-09-30","poruka":""},{"vreme":"2015-09-30 00:07:53","cena":-10001,"utovar":"2015-09-30","istovar":"2015-09-30","poruka":"cvrc:D"},{"vreme":"2015-09-30 08:34:53","cena":1000,"utovar":"2015-09-30","istovar":"2015-09-30","poruka":""}]}
var newArray = [];
for (i = 0; i < JSONstring.data.length; i++) {
var dt = new Date(JSONstring.data[i].vreme).valueOf(); //console.log(dt);
newArray[i] = [dt, JSONstring.data[i].cena];
}
google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawBackgroundColor);
function drawBackgroundColor() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows(newArray);
var options = {
hAxis: {
title: 'vreme'
},
vAxis: {
title: 'cena'
},
backgroundColor: '#f1f8e9'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
your data:
{"data":[
{"vreme":"2015-09-29 19:07:23","cena":1100, ... },
{"vreme":"2015-09-29 18:41:06","cena":3453, ... },
...
]
}
breaking down your json data (not code), you have an array of objects:
"data" : [
{myObject1}, {myObject2}, ...
]
your example was
[data.vreme[0], data.cena[0]],
[data.vreme[1], data.cena[1]], ...
which is close, but what you need is
[data[0].vreme, data[0].cena],
[data[1].vreme, data[1].cena], ...
ultimately you need an array of arrays:
data.addRows([
[0, 0], [1, 100], [2, 23], [3, 17], [4, 18], [5, 9],
...
[66, 70], [67, 72], [68, 75], [69, 80]
]);
or
data.addRows([
[data[0].vreme, data[0].cena], [data[1].vreme, data[1].cena],
...
[data[68].vreme, data[68].cena]
]);
so you'll have to push data from each object {} into an array, and each of those small arrays into one container array.