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>
Related
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.
Is there any way to always show shadows on line or bar google chart?.
I've tried searching solutions with css, svg, rect and g but no luck.
basically, line shadow should be same as they are shown when hovered over legend.
Thanks,
Ivan
there are no configuration options or settings, specifically for a shadow
but using a style column role, it is possible to add a semi-transparent border
see following working snippet,
a data view is used to apply a style to every other row
(so you can see the difference from the normal style)
google.charts.load('current', {
packages: ['controls', 'corechart', 'table']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'y0');
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]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: function (dt, row) {
var columnStyle = '';
if (row % 2 === 0) {
columnStyle = 'fill-color: #f44336; stroke-color: #d50000; stroke-opacity: 0.35; stroke-width: 5;';
}
return columnStyle;
},
role: 'style',
type: 'string'
}]);
var container = document.getElementById('chart-column');
var chartColumn = new google.visualization.ColumnChart(container);
var options = {
chartArea: {
bottom: 24,
left: 36,
right: 16,
top: 24,
width: '100%',
height: '100%'
},
colors: ['#f44336'],
height: '100%',
legend: {
position: 'none'
},
width: '100%'
};
window.addEventListener('resize', function () {
chartColumn.draw(view, options);
});
chartColumn.draw(view, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart-column"></div>
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'}}
I am creating a Google line chart as per Google Line Chart Documentation.
I want to style the colour of the line such that it is a gradient between two colours, say between Green and Red. The weighting of each colour should be controlled by the 'y' value of the line.
i.e. at the point where the line's 'y' value is 0, the line will be completely green, At the highest 'y' value on the it should be completely red. In between values should have a weighting depending on the value of y at that point.
Is this possible? If so, how?
Since Google Line Chart is SVG based, you could customize how the line can change from one color to another via linearGradient element.
The below example shows how to inject [linearGradient element] into the chart (google.visualization.LineChart):
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([
[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, 60], [64, 50], [65, 45],
[66, 40], [67, 42], [68, 35], [69, 30]
]);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
},
backgroundColor: '#f1f8e9'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
addChartGradient(chart);
});
chart.draw(data, options);
}
function addChartGradient(chart) {
var chartDiv = chart.getContainer();
var svg = chartDiv.getElementsByTagName('svg')[0];
var properties = {
id: "chartGradient",
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%",
stops: [
{ offset: '5%', 'stop-color': '#f60' },
{ offset: '95%', 'stop-color': '#ff6' }
]
};
createGradient(svg, properties);
var chartPath = svg.getElementsByTagName('path')[1]; //0 path corresponds to legend path
chartPath.setAttribute('stroke', 'url(#chartGradient)');
}
function createGradient(svg, properties) {
var svgNS = svg.namespaceURI;
var grad = document.createElementNS(svgNS, 'linearGradient');
grad.setAttribute('id', properties.id);
["x1","y1","x2","y2"].forEach(function(name) {
if (properties.hasOwnProperty(name)) {
grad.setAttribute(name, properties[name]);
}
});
for (var i = 0; i < properties.stops.length; i++) {
var attrs = properties.stops[i];
var stop = document.createElementNS(svgNS, 'stop');
for (var attr in attrs) {
if (attrs.hasOwnProperty(attr)) stop.setAttribute(attr, attrs[attr]);
}
grad.appendChild(stop);
}
var defs = svg.querySelector('defs') ||
svg.insertBefore(document.createElementNS(svgNS, 'defs'), svg.firstChild);
return defs.appendChild(grad);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
JSFiddle
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>