hAxis title text position in Google line chart

hAxis title text position in Google line chart - javascript

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>

Related

Why does the chartArea configuration option hide hAxis ticks?

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.

Rotate an entire Google chart

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>

Attempting to add a JavaScript graph to a rails app

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);
}`

Make array from JSON

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.

Adding a custom tooltip to a bubble chart / highchart

I am trying to customize the tooltip in a highcharts bubble chart. Rather than having just the figures appear in the tooltip, I'd like to add context based on the x,y and z titles (ex, "50 fatalities, 100 injured, 150 total victims" instead of the current "(50,150) Size: 150" display). I'm able to make this happen in scatter plot charts using the following, but no dice in bubbles. Any ideas? Thanks. :)
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} fatalities, {point.y} injured, {point.z} total'
}

Hope I understand your question correctly, is this what you are looking for.
$(function () {
$('#container').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy'
},
plotOptions: {
bubble: {
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} fatalities, {point.y} injured, {point.z} total'
}
}
},
title: {
text: 'Highcharts Bubbles'
},
series: [{
data: [
[97, 36, 79],
[94, 74, 60],
[68, 76, 58],
[64, 87, 56],
[68, 27, 73],
[74, 99, 42],
[7, 93, 87],
[51, 69, 40],
[38, 23, 33],
[57, 86, 31]
]
}, {
data: [
[25, 10, 87],
[2, 75, 59],
[11, 54, 8],
[86, 55, 93],
[5, 3, 58],
[90, 63, 44],
[91, 33, 17],
[97, 3, 56],
[15, 67, 48],
[54, 25, 81]
]
}, {
data: [
[47, 47, 21],
[20, 12, 4],
[6, 76, 91],
[38, 30, 60],
[57, 98, 64],
[61, 17, 80],
[83, 60, 13],
[67, 78, 75],
[64, 12, 10],
[30, 77, 82]
]
}]
});
});
DEMO

You should use tooltip formatter http://api.highcharts.com/highstock#tooltip.formatter
EDIT:
http://jsfiddle.net/7nqB5/

We Keep Coding

JavaScript is the programming language of the Web.

hAxis title text position in Google line chart - javascript

Related

Why does the chartArea configuration option hide hAxis ticks?

Rotate an entire Google chart

Attempting to add a JavaScript graph to a rails app

Make array from JSON

Adding a custom tooltip to a bubble chart / highchart

Categories

Resources