Google Charts Combochart with Candlesticks - google-visualization

I am trying to create a combochart with candlesticks and a trend line.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[Date(2016, 2, 14, 8, 0), 20, 28, 38, 45],
[Date(2016, 2, 14, 8, 1), 31, 38, 55, 66],
[Date(2016, 2, 14, 8, 2), 50, 55, 77, 80],
[Date(2016, 2, 14, 8, 3), 77, 77, 66, 66]
], true);
var options = {
legend: 'none',
bar: { groupWidth: '90%' },
candlestick: {
fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
risingColor: { strokeWidth: 0, fill: '#0f9d58' } // green
},
seriesType: 'candlesticks',
series: {5: {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
This creates a candlestick chart, but when I add data for a trend line, I get error message "Last domain does not have enough data columns (missing 3)."
[Date(2016, 2, 14, 8, 0), 20, 28, 38, 45, 25],
[Date(2016, 2, 14, 8, 1), 31, 38, 55, 66, 30],
[Date(2016, 2, 14, 8, 2), 50, 55, 77, 80, 35],
[Date(2016, 2, 14, 8, 3), 77, 77, 66, 66, 40]

I figured it out.
series: {1: {type: 'line'}}

Related

chartjs dataset from single line to multiple line

please help, thank you.
i am now writing datapart of chartjs
var configcount = {type: "line",data: {
labels: ["Apr20", "May20", "Jun20", "Jul20", "Aug20", "Sep20", "Oct20"],
datasets: [{label: "Balance1",
data: [10, 20, 30, 40, 50, 60, 70],
fill: false,pointBorderWidth: ...
,},},],},},};
want to change multiple line that Balance1: 10, 20, 30, 40, 50, 60, 70 & Balance2: 15, 30, 15, 30, 15, 30, 15
You need to define two distinct datasets as follows.
data: {
labels: ["Apr20", "May20", "Jun20", "Jul20", "Aug20", "Sep20", "Oct20"],
datasets: [{
label: "Balance1",
data: [10, 20, 30, 40, 50, 60, 70],
...
}, {
label: "Balance2",
data: [15, 30, 15, 30, 15, 30, 15],
fill: false,
...
}]
}
Please take a loo at below code and see how it works.
new Chart(document.getElementById("chart"), {
type: 'line',
data: {
labels: ["Apr20", "May20", "Jun20", "Jul20", "Aug20", "Sep20", "Oct20"],
datasets: [{
label: "Balance1",
data: [10, 20, 30, 40, 50, 60, 70],
fill: false,
backgroundColor: "rgba(255, 99, 132, 0.2)",
borderColor: "rgb(255, 99, 132)",
pointBorderWidth: 10
}, {
label: "Balance2",
data: [15, 30, 15, 30, 15, 30, 15],
fill: false,
backgroundColor: "rgba(54, 162, 235, 0.2)",
borderColor: "rgb(54, 162, 235)",
pointBorderWidth: 4,
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="80"></canvas>

How do I make my Type:Time to work with my Line Chart?

I am working on creating a Line graph that plots points at different times during one day for different days and in order to do that, I need to use the type: time on the xAxes. I have the moment.js downloaded, but the type:time is giving me an error. Without the type:time, the X axis label is too long and makes the graph look bad. Any ideas what I would need to do to fix this?
I have tried to put the data points this way:
data: [ {x: newDate(2019, 06, 24, 08, 00), y: 24}]
but it still didn't work with the type:time
<canvas id="timechart" width="800" height="400" role="img"></canvas>
<script>
var ctx = document.getElementById('timechart');
var timeFormat = 'MM/DD/YY HH:mm';
function newDate(days) {
return moment().add(days).toDate();
}
function newDateString(days) {
return moment().add(days).format();
}
var timechart = new Chart(ctx, {
type: "line",
data: {
labels: [newDate(0), newDate(1), newDate(2), newDate(3),
newDate(4), newDate(5), newDate(6), newDate(7), newDate(8), newDate(9),
newDate(10), newDate(11),
newDate(12), newDate(13), newDate(14), newDate(15),
newDate(16), newDate(17)],
datasets: [
{
data: [12, 21, 32, 25, 16, 14, 7, 25, 18, 20, 22, 15,
17, 11, 19, 28, 30, 10],
label: 'D Speed',
fill: false,
backgroundColor: 'rgba(102, 147, 188, 1)',
borderColor: 'rgba(102, 147, 188, 1)',
radius: 4,
hoverRadius: 5,
}, {
data: [8, 16, 24, 30, 20, 10, 12, 21, 32, 15, 17, 11,
22, 18, 29, 17, 8],
label: 'U Speed',
fill: false,
backgroundColor: 'rgba(255, 147, 44, 1)',
borderColor: 'rgba(255, 147, 44, 1)',
radius: 4,
hoverRadius: 5,
}
],
},
options: {
title: {
display: true,
},
scales: {
xAxes: [{
display: true,
type: 'time',
}],
yAxis: [{
display: true,
}]
},
}
});
</script>
I expect the x axis labels to show just the MM/DD/YY HH:MM but it is actually not showing the chart at all.
The code you shared worked for me. Make sure that you've included Moment and the non-bundled version of Chart.js in your project. E.g.:
<script src="https://cdn.jsdelivr.net/npm/moment#2.24.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
Also, check your browser's developer console to see if there are any JavaScript errors that can help give more clues as to the problem. You can access in Chrome by hitting F12.

Google charts : Line chart failing to animate on start up

I can't get my multi-line chart to animate on start up -
While I'm fetching data points for my multi line graph from the DB, I've added a sample of what the points would be in my code below:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart()
{
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time');
data.addColumn('number', 'Count of Users');
data.addColumn('number', 'Count of Items');
data.addColumn('number', 'Count of Locations');
data.addRows([
[[8,07,06],1,181,181],
[[8,08,52],1,73,73],
[[8,09,43],1,204,204],
[[8,10,06],1,209,209],
[[8,10,27],1,334,334],
[[8,10,47],1,345,345],
[[8,12,24],1,852,852],
[[8,13,52],1,317,317],
[[8,43,01],1,538,538],
[[8,51,53],1,50,50],
[[8,55,01],1,50,50],
[[8,55,30],1,99,99],
[[8,56,27],1,51,51],
[[8,57,11],1,50,50],
[[8,57,58],1,50,50],
[[8,58,32],1,50,50],
[[8,59,42],1,16,16],
[[9,08,54],1,16,16],
[[9,09,41],1,2,2],
[[9,10,07],1,9,9],
[[9,10,53],1,35,35],
[[9,11,31],1,4,4],
[[9,11,45],1,3,3]
]);
var options = {
title: 'Updated every 3 Hours',
chart: {
animation: {
duration: 2000,
easing: 'linear',
startup: true
},
},
width: 1000,
height: 500
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
As of now a static multi line graph is rendered:
enter image description here
There are multiple issues with your code(your console should have logged them)
08 and 09 are not valid Number-values(should be 8 and 9)
you load the wrong package(you must load corechart)
animation is not a property of chart
fixed chart:
google.load('visualization', '1.1', {
packages: ['corechart']
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time');
data.addColumn('number', 'Count of Users');
data.addColumn('number', 'Count of Items');
data.addColumn('number', 'Count of Locations');
data.addRows([
[
[8, 7, 06], 1, 181, 181
],
[
[8, 8, 52], 1, 73, 73
],
[
[8, 9, 43], 1, 204, 204
],
[
[8, 10, 06], 1, 209, 209
],
[
[8, 10, 27], 1, 334, 334
],
[
[8, 10, 47], 1, 345, 345
],
[
[8, 12, 24], 1, 852, 852
],
[
[8, 13, 52], 1, 317, 317
],
[
[8, 43, 01], 1, 538, 538
],
[
[8, 51, 53], 1, 50, 50
],
[
[8, 55, 01], 1, 50, 50
],
[
[8, 55, 30], 1, 99, 99
],
[
[8, 56, 27], 1, 51, 51
],
[
[8, 57, 11], 1, 50, 50
],
[
[8, 57, 58], 1, 50, 50
],
[
[8, 58, 32], 1, 50, 50
],
[
[8, 59, 42], 1, 16, 16
],
[
[9, 8, 54], 1, 16, 16
],
[
[9, 9, 41], 1, 2, 2
],
[
[9, 10, 07], 1, 9, 9
],
[
[9, 10, 53], 1, 35, 35
],
[
[9, 11, 31], 1, 4, 4
],
[
[9, 11, 45], 1, 3, 3
]
]);
var options = {
title: 'Updated every 3 Hours',
animation: {
duration: 2000,
easing: 'linear',
startup: true
},
//width: 1000,
//height: 500
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<div id="chart_div"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

geochart - how to add some information about the regions

I have this geochart: https://jsfiddle.net/y2dkrpg1/
Is it possible to add some adition information (text) about each region (for example by clicking on the region)?
Thank you!
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['State', 'NS'],
['Blagoevgrad', 17],
['Burgas', 15],
['Varna', 27],
['Veliko Tarnovo', 24],
['Vidin', 30],
['Vratsa', 35],
['Gabrovo', 30],
['Dobrich', 37],
['Kardzhali', 23],
['Kyustendil', 17],
['Lovech', 20],
['Montana', 49],
['Pazardjik', 31],
['Pernik', 26],
['Pleven', 24],
['Plovdiv', 28],
['Razgrad', 25],
['Ruse', 28],
['Silistra', 49],
['Sliven', 17],
['Smolyan', 25],
['Sofia', 28],
['Stara Zagora', 20],
['Targovishte', 30],
['Haskovo', 40],
['Shumen', 40],
['Yambol', 30],
['Pazardzhik', 31],
['Sofia-grad', 12],
]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 0,
suffix: '%'
});
formatter.format(data, 1);
var options = {
region: 'BG',
displayMode: 'regions',
resolution: 'provinces',
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
Write something in stead of 'Tadam' and the values.
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['State', 'NEETs','TADAM'],
['Blagoevgrad', 17, 100],
['Burgas', 15, 100],
['Varna', 27, 6],
['Veliko Tarnovo', 24, 34],
['Vidin', 30, 324],
['Vratsa', 35, 234],
['Gabrovo', 30, 32423],
['Dobrich', 37, 5],
['Kardzhali', 23, 5],
['Kyustendil', 17, 5],
['Lovech', 20, 345],
['Montana', 49, 43534],
['Pazardjik', 31, 34534],
['Pernik', 26, 34534],
['Pleven', 24, 3443],
['Plovdiv', 28, 34],
['Razgrad', 25, 100],
['Ruse', 28, 10],
['Silistra', 49, 1],
['Sliven', 17, 2],
['Smolyan', 25, 3],
['Sofia', 28, 4],
['Stara Zagora', 20, 5],
['Targovishte', 30, 6],
['Haskovo', 40, 7],
['Shumen', 40, 8],
['Yambol', 30, 9],
['Pazardzhik', 31, 10],
['Sofia-grad', 12, 11],
]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 0,
suffix: '%'
});
formatter.format(data, 1);
var options = {
region: 'BG',
displayMode: 'regions',
resolution: 'provinces',
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
https://jsfiddle.net/y2dkrpg1/

How to make a custom tooltip for each series in Google Line Chart

I am currently testing google charts and having difficulty in specifying my own custom tooltips.
my data is declared as below
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Cats');
data.addColumn({type: 'string', role: 'tooltip', p: {'html':true}});
data.addRows([0, 0, 0, 'hello'], [1, 10, 5, 'hello'],
[2, 23, 15, 'hello'],[3, 17, 9, 'hello'], [4, 18, 10, 'hello'],
[5, 9, 5, 'hello'],
see this jsFiddle http://jsfiddle.net/SecretSquirrel/rbwyhx1q/
It appears the custom tooltip is only affecting the first data column?
I thought it was pretty limited to only allow 1 tooltip per row, but if this is only 1 tooltip for the first column this is really quite useless.
Well you have to add another tooltip column for your second graft.
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addColumn({type: 'string', role: 'tooltip', p: {'html':true}});
data.addColumn('number', 'Cats');
data.addColumn({type: 'string', role: 'tooltip', p: {'html':true}});
data.addRows([
[0, 0,'custom', 0, 'hello'], [1, 10,'custom', 5, 'hello'], [2, 23,'custom', 15, 'hello'],
[3, 17,'custom', 9, 'hello'], [4, 18,'custom', 10, 'hello'], [5, 9,'custom', 5, 'hello'],
[6, 11,'custom', 3, 'hello'], [7, 27,'custom', 19, 'hello'], [8, 33,'custom', 25, 'hello'],
[9, 40,'custom', 32, 'hello'], [10, 32,'custom', 24, 'hello'], [11, 35,'custom', 27, 'hello'],
[12, 30,'custom', 22, 'hello'], [13, 40,'custom', 32, 'hello'], [14, 42,'custom', 34, 'hello'],
[15, 47,'custom', 39,'hello'], [16, 44,'custom', 36,'hello'], [17, 48,'custom', 40, 'hello'],
[18, 52,'custom', 44,'hello'], [19, 54,'custom', 46,'hello'], [20, 42,'custom', 34, 'hello'],
[21, 55,'custom', 47,'hello'], [22, 56,'custom', 48,'hello'], [23, 57,'custom', 49,'hello']
]);
var options = {
width: 1000,
height: 563,
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
},
series: {
1: {curveType: 'function'}
}
};
var chart = new google.visualization.LineChart(document.getElementById('ex2'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<div id="ex2"></div>