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]]);
Related
I've got a list of lists:
myList = [[67, 79], [1, 5], [63, 122], [43, 44], [2, 5], [31, 37], [16, 45], [110, 124], [60, 64], [68, 79], [37, 116], [5, 76]]
And I would like to shuffle it around, but every way I've tried to do it has ruined the structure of lists and stripped it down to bare numbers. For instance:
myShuffledList = myList.sort((a, b) => 0.5 - Math.random());
Gives me something like:
myShuffledList = [60,64,110,124,63,122,5,76,43,44,68,79,37,116,2,5,1,5,67,79,16,45,31,37]
instead of something like this:
myShuffledList = [[68, 79], [2, 5], [31, 37], [1, 5], [67, 79], [110, 124], [63, 122], [16, 45], [5, 76], [37, 116], [43, 44], [60, 64]]
Is there simple solution as to how I can avoid the list being stripped completely, and just shuffle the lists of lists?
Everything is working as you intended it to. You just got bamboozled by console.log converting your array to strings. If you use a custom toString function to avoid this you can see that everything works as intended
myList = [
[67, 79],
[1, 5],
[63, 122],
[43, 44],
[2, 5],
[31, 37],
[16, 45],
[110, 124],
[60, 64],
[68, 79],
[37, 116],
[5, 76]
]
myShuffledList = myList.sort((a, b) => 0.5 - Math.random());
var toString = (list) => {
return `${list.map((sublist) => `[${sublist}]`)}`
}
console.log(toString(myList))
console.log(toString(myShuffledList))
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>
Trying to add a JavaScript graph. Go this from the Google developers page. It gives this error:
ExecJS::RuntimeError in Scores#index
SyntaxError: [stdin]:8:1: reserved word 'function'
and highlights this line:
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
Not really sure what it means, tried googling it but couldn't find any solutions.
HTML
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Javascript
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], [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]
]);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}`
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.
I am using a javascript library caleed JSCharts for generating line, bar graphs and so on. Everything is working like it should, I can provide a working example:
var myData = new Array(['2013-01-24', 117], ['2013-01-25', 91], ['2013-01-26', 90], ['2013-01-27', 128], ['2013-01-28', 168], ['2013-01-29', 169], ['2013-01-30', 146], ['2013-01-31', 48], ['2013-02-01', 66], ['2013-02-02', 48], ['2013-02-03', 90], ['2013-02-04', 138], ['2013-02-05', 77], ['2013-02-06', 55], ['2013-02-07', 79], ['2013-02-08', 63], ['2013-02-09', 35], ['2013-02-10', 63], ['2013-02-11', 90], ['2013-02-12', 80], ['2013-02-13', 48], ['2013-02-14', 62], ['2013-02-15', 71], ['2013-02-16', 52], ['2013-02-17', 95], ['2013-02-18', 69], ['2013-02-19', 94], ['2013-02-20', 119], ['2013-02-21', 725], ['2013-02-22', 1348], ['2013-02-23', 1244], ['2013-02-24', 607], ['2013-02-25', 585], ['2013-02-26', 941], ['2013-02-27', 1466], ['2013-02-28', 1015], ['2013-03-01', 1626], ['2013-03-02', 965], ['2013-03-03', 875], ['2013-03-04', 841], ['2013-03-05', 969], ['2013-03-06', 710], ['2013-03-07', 566], ['2013-03-08', 660], ['2013-03-09', 622], ['2013-03-10', 651], ['2013-03-11', 679], ['2013-03-12', 812], ['2013-03-13', 754], ['2013-03-14', 669], ['2013-03-15', 661], ['2013-03-16', 328], ['2013-03-17', 529], ['2013-03-18', 552], ['2013-03-19', 647], ['2013-03-20', 462], ['2013-03-21', 452], ['2013-03-22', 157], ['2013-03-23', 188], ['2013-03-24', 103], ['2013-03-25', 152], ['2013-03-26', 155], ['2013-03-27', 165], ['2013-03-28', 952], ['2013-03-29', 1135], ['2013-03-30', 915], ['2013-03-31', 996], ['2013-04-01', 400], ['2013-04-02', 204], ['2013-04-03', 145], ['2013-04-04', 164], ['2013-04-05', 1248], ['2013-04-06', 517], ['2013-04-07', 300], ['2013-04-08', 494], ['2013-04-09', 248], ['2013-04-10', 220], ['2013-04-11', 245], ['2013-04-12', 152], ['2013-04-13', 109], ['2013-04-14', 293], ['2013-04-15', 207], ['2013-04-16', 120], ['2013-04-17', 528], ['2013-04-18', 266], ['2013-04-19', 286], ['2013-04-20', 313], ['2013-04-21', 162], ['2013-04-22', 310]);
console.log("myData: " + Object.prototype.toString.call(myData));
var myChart = new JSChart('116376655202954_3months_page_views_chartcontainer', 'line');
myChart.setDataArray(myData);
myChart.setSize(960, 320);
myChart.setAxisNameX('');
myChart.setAxisValuesColorX('#FFFFFF');
myChart.setAxisNameY('');
myChart.setTitle('Page Views in the last 3 months');
Chart.draw();
My issue is that now I make an Ajax GET request to a php file that sends me as response the following:
['2013-02-24', 10], ['2013-02-25', 17], ['2013-02-26', 23], ['2013-02-27', 13], ['2013-02-28', 11], ['2013-03-01', 12], ['2013-03-02', 6], ['2013-03-03', 20], ['2013-03-04', 21], ['2013-03-05', 18], ['2013-03-06', 12], ['2013-03-07', 17], ['2013-03-08', 10], ['2013-03-09', 7], ['2013-03-10', 6], ['2013-03-11', 13], ['2013-03-12', 24], ['2013-03-13', 20], ['2013-03-14', 15], ['2013-03-15', 12], ['2013-03-16', 4], ['2013-03-17', 21], ['2013-03-18', 18], ['2013-03-19', 21], ['2013-03-20', 10], ['2013-03-21', 4], ['2013-03-22', 2], ['2013-03-23', 9], ['2013-03-24', 7], ['2013-03-25', 13], ['2013-03-26', 2], ['2013-03-27', 9], ['2013-03-28', 15], ['2013-03-29', 14], ['2013-03-30', 29], ['2013-03-31', 19], ['2013-04-01', 6], ['2013-04-02', 4], ['2013-04-03', 7], ['2013-04-04', 5], ['2013-04-05', 56], ['2013-04-06', 3], ['2013-04-07', 2], ['2013-04-08', 11], ['2013-04-09', 4], ['2013-04-10', 7], ['2013-04-11', 1], ['2013-04-12', 6], ['2013-04-13', 2], ['2013-04-14', 2], ['2013-04-15', 6], ['2013-04-16', 3], ['2013-04-17', 13], ['2013-04-18', 5], ['2013-04-19', 7], ['2013-04-20', 4], ['2013-04-21', 4], ['2013-04-22', 8]
Here is my code for the GET request:
function submitForm(t) {
var page_id = String("#" + $(t).attr('id'));
$.ajax({type:'GET', url: 'charts.php', data:$(page_id).serialize(), success:
function(response) {
document.getElementById('<?php echo $account['id']; ?>_fan_removes').style.display = "block";
console.log(response);
var myFanRemovesData = new Array(response);
console.log(myFanRemovesData);
var myChart = new JSChart('116376655202954_fan_removes', 'line');
myChart.setDataArray(myFanRemovesData);
myChart.setSize(960, 320);
myChart.setAxisNameX('');
myChart.setAxisValuesColorX('#FFFFFF');
myChart.setAxisNameY('');
myChart.setTitle('Page Fan Removes in the last 2 months');
myChart.draw();
}});
return false;
};
I know that the response is a string and I want it to be placed like in the working example but I can't get it to work properly. The myData and myFanRemovesData are [object Array] but if I use console.log on both I receive the following:
For myData:
[Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], ... ]
which is an array of arrays and for myFanRemovesData:
["['2013-02-24', 10], ['2013-02-25', 17], ['2013-02-…-04-20', 4], ['2013-04-21', 4], ... "]
I've tried to convert the response to array but with no visible success. I don't know what to do next so any suggestions and guidance is more than welcomed.
Your php file is returning you a string. You need to convert it to JSON before parsing it in Jquery.
For more info, check this tutorial: http://www.islandsmooth.com/2010/04/send-and-receive-json-data-using-ajax-jquery-and-php/