Related
I'm using google line chart in my project and facing a problem that I need to change color for some segments to visualize the target status changes over time. It should look like this:
I've searched around for quite long but couldn't find a way to do that with google chart.
My workaround is to add another series to the chart and alternately set the value of the second line eq to the first line based on the status but it looks tedious.
Is there a proper way to do this? Here is a sample of my workaround solution:
function drawMultipleTrendlineChart() {
var chart;
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales value A');
data.addColumn('number', 'Sales value B');
data.addRows([
[new Date(2013, 3, 11), 200, 0],
[new Date(2013, 4, 02), 500, 0],
[new Date(2013, 5, 03), 700, 0],
[new Date(2013, 6, 04), 800, 800],
[new Date(2013, 7, 05), 500, 500],
[new Date(2013, 8, 06), 900, 0],
[new Date(2014, 0, 07), 800, 0],
[new Date(2014, 1, 08), 1100, 1100],
[new Date(2014, 2, 09), 1000, 1000],
[new Date(2014, 2, 10), 1000, 0],
[new Date(2014, 3, 11), 800, 0],
]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
prefix: 'R$:'
});
formatter.format(data, 1);
var dateFormatter = new google.visualization.NumberFormat({
pattern: 'MMM yyyy'
});
dateFormatter.format(data, 0);
var chartHeight = 400;
var chartWidth = 600;
var chartOptions = {
tooltip: {
isHtml: true
},
title: 'Trendlines with multiple lines',
isStacked: true,
width: chartWidth,
height: chartHeight,
colors: ['#0000D8', '#00dddd'],
hAxis: {
title: 'example title',
slantedText: false,
slantedTextAngle: 45,
textStyle: {
fontSize: 10
},
format: 'dd-MM-yyyy'
},
chartArea: {
left: 50,
top: 20,
width: (chartWidth - 10),
height: (chartHeight - 90)
}
};
chart = new google.visualization.LineChart(document.getElementById('multipleTrendChart'));
chart.draw(data, chartOptions);
}
google.load('visualization', '1', {
packages: ['corechart'],
callback: drawMultipleTrendlineChart
});
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</script>
</head>
<body>
<div id="multipleTrendChart"></div>
</body>
</html>
After looking at this answer How to change color for negative values, I tried and this works for me. The answer is using DataView API to manipulate the data.
google.charts.load('current', {
callback: drawLineColors,
packages: ['corechart']
});
function drawLineColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Blue Team');
data.addColumn('number', 'Red Team');
data.addRows([
[0, 0, 0],
[3, 1700, 1600],
[6, 1800, 1700],
[9, 2500, 2423],
[12, 3000, 2500],
[15, 4700, 5800],
[18, 5200, 5900],
[21, 5500, 6000],
[24, 6000, 6200],
[27, 6800, 6700],
[30, 7500, 7000],
[33, 7800, 8200],
[36, 7900, 9756],
[39, 8000, 10752],
[42, 9000, 13753],
[45, 15000, 17845]
]);
var options = {
legend: {
position: 'top'
},
enableInteractivity: false,
width: 712,
height: 156,
backgroundColor: {
fill: 'transparent'
},
curveType: 'function',
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Team Gold'
}
};
var dataView = new google.visualization.DataView(data);
dataView.setColumns([
// reference first column by index
0,
// variance
{
calc: function(data, row) {
return data.getValue(row, 1);
},
type: 'number',
label: 'Y'
},
// variance color
{
calc: function(data, row) {
var val = data.getValue(row, 2) - data.getValue(row, 1);
if (val >= 0) {
return '#0000FF';
}
return '#FF0000';
},
type: 'string',
role: 'style'
}
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(dataView, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I have to use classic Google Line Chart because the Material version doesn't support the curved lines yet, but I like curves. Unfortunately though it seems that only Material chart displays the datum stems (I'm not sure if I describe that properly, but I mean those dots which represent the data points on the line), and only when you hover over a line (anywhere along the line).
Here is a screenshot, to the left is a Google Material Chart and I'm hovering over the line, to the right is a chartjs chart, shows the studs even without hovering over anything.
Google Line Chart JSFiddle where you can see how the Material and the Classic Google Charts behave: https://jsfiddle.net/csabatoth/yyhLwkaf/
var classicOptions = {
title: 'Foo',
width: 900,
height: 500,
theme: 'material',
curveType: 'function'
// TODO
};
When in Material mode, you have to hover over a line to cause the data studs to appear. Classic charts is even worse in this respect: you have to "follow" the line until you hit a data point, and that's when it is only revealed.
What I desire is something like that (see the first visible line chart):
http://www.chartjs.org/docs/#line-chart-introduction
The data studs are visible regardless you hover over the line or not. I cannot seem to find out which is the proper option for that.
I think you are looking for pointSize
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', "Average Temperature");
data.addColumn('number', "Average Hours of Daylight");
data.addRows([
[new Date(2014, 0), -.5, 5.7],
[new Date(2014, 1), .4, 8.7],
[new Date(2014, 2), .5, 12],
[new Date(2014, 3), 2.9, 15.3],
[new Date(2014, 4), 6.3, 18.6],
[new Date(2014, 5), 9, 20.9],
[new Date(2014, 6), 10.6, 19.8],
[new Date(2014, 7), 10.3, 16.6],
[new Date(2014, 8), 7.4, 13.3],
[new Date(2014, 9), 4.4, 9.9],
[new Date(2014, 10), 1.1, 6.6],
[new Date(2014, 11), -.2, 4.5]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2]);
var materialOptions = {
chart: {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
},
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Temps'},
1: {axis: 'Daylight'}
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Temps: {label: 'Temps (Celsius)'},
Daylight: {label: 'Daylight'}
}
}
};
var classicOptions = {
curveType: 'function',
pointSize: 10,
title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
width: 900,
height: 500,
// Gives each series an axis that matches the vAxes number below.
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1}
},
vAxes: {
// Adds titles to each axis.
0: {title: 'Temps (Celsius)'},
1: {title: 'Daylight'}
},
hAxis: {
ticks: [
new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
]
},
vAxis: {
viewWindow: {
max: 30
}
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(view, materialOptions);
button.innerText = 'Change to Classic';
button.onclick = drawClassicChart;
}
function drawClassicChart() {
var classicChart = new google.visualization.LineChart(chartDiv);
classicChart.draw(view, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;
}
drawClassicChart();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<button id="change-chart">Change to Material</button>
<br><br>
<div id="chart_div"></div>
I am trying to figure out how to add a trendline to my google line chart but am failing miserably. Is anyone able to point me in the right direction? I have seen that google do not provide a way to do this on a line chart but have also seen that it is possible to add a new series into the chart to achieve something similar. Here is what I have so far which works great besides not having a trendline. I have tried a few suggestions I found online but none of them made the maths clear to get the trendline to be a straight line:
function drawChartCustomerRevenue_93() {
var revenueChart_93;
var data = new google.visualization.DataTable();
data.addColumn('string', Date);
data.addColumn('number', 'Sales Value');
data.addRow(['Apr 2013', 271176.940000000]);
data.addRow(['May 2013', 419031.540000000]);
data.addRow(['Jun 2013', 429155.540000000]);
data.addRow(['Jul 2013', 443780.400000000]);
data.addRow(['Aug 2013', 320353.540000000]);
data.addRow(['Sep 2013', 310640.910000000]);
data.addRow(['Oct 2013', 252187.700000000]);
data.addRow(['Nov 2013', 301414.560000000]);
data.addRow(['Dec 2013', 224296.850000000]);
data.addRow(['Jan 2014', 291131.140000000]);
data.addRow(['Feb 2014', 354750.680000000]);
data.addRow(['Mar 2014', 312736.710000000]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
prefix: '£'
});
formatter.format(data, 1);
var chartHeight = 400;
var chartWidth = 500;
var chartOptions = {
trendlines: {
{
color: 'green',
}
},
title: '1: TEST NAME',
isStacked: true,
width: chartWidth,
height: chartHeight,
colors: ['#0000D4'],
hAxis: {
title: 'Sales Value (£)',
slantedText: true,
slantedTextAngle: 45,
textStyle: {
fontSize: 10
},
},
chartArea: {
left: 100,
top: 20,
width: (chartWidth - 10),
height: (chartHeight - 90)
}
};
revenueChart_93 = new google.visualization.LineChart(document.getElementById('CustomerRevenue_93'));
revenueChart_93.draw(data, chartOptions);
};
drawChartCustomerRevenue_93();
EDIT:
I have now attempted to put the code in suggested to me but it still shows no trendline:
function drawChartCustomerRevenue_93() {
var revenueChart_93;
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales Value');
data.addRow([new Date(2013, 4, 1), 184656.440000000]);
data.addRow([new Date(2013, 5, 1), 420286.250000000]);
data.addRow([new Date(2013, 6, 1), 431562.840000000]);
data.addRow([new Date(2013, 7, 1), 446187.800000000]);
data.addRow([new Date(2013, 8, 1), 320353.540000000]);
data.addRow([new Date(2013, 9, 1), 313364.960000000]);
data.addRow([new Date(2013, 10, 1), 252187.700000000]);
data.addRow([new Date(2013, 11, 1), 303874.560000000]);
data.addRow([new Date(2013, 12, 1), 224296.850000000]);
data.addRow([new Date(2014, 1, 1), 297499.970000000]);
data.addRow([new Date(2014, 2, 1), 354950.680000000]);
data.addRow([new Date(2014, 3, 1), 315529.610000000]);
data.addRow([new Date(2014, 4, 1), 145219.710000000]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
prefix: '£'
});
formatter.format(data, 1);
var dateFormatter = new google.visualization.NumberFormat({
pattern: 'MMM yyyy'
});
dateFormatter.format(data, 0);
var chartHeight = 320;
var chartWidth = 400;
var chartOptions = {
trendlines: {
0: {
color: 'green'
}
},
title: '1: Test Name',
isStacked: true,
width: chartWidth,
height: chartHeight,
colors: ['#0000D4'],
hAxis: {
title: 'Sales Value (£)',
slantedText: true,
slantedTextAngle: 45,
textStyle: {
fontSize: 10
},
format: 'MMM yyyy',
},
chartArea: {
left: 100,
top: 20,
width: (chartWidth - 8),
height: (chartHeight - 72)
}
};
revenueChart_93 = new google.visualization.LineChart(document.getElementById('CustomerRevenue_93'));
revenueChart_93.draw(data, chartOptions);
};
drawChartCustomerRevenue_93();
First, as #mcgyver5 pointed out, trendlines are not supported for discrete (string-based) axes. Since your data is monthly, you can switch to a Date axis instead of a string axis, which would fix that issue. Also, your trendlines option is not specified correctly.
Here's an example that fixes both issues:
function drawChartCustomerRevenue_93() {
var revenueChart_93;
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales Value');
data.addRow([new Date(2013, 3, 1), 271176.940000000]);
data.addRow([new Date(2013, 4, 1), 419031.540000000]);
data.addRow([new Date(2013, 5, 1), 429155.540000000]);
data.addRow([new Date(2013, 6, 1), 443780.400000000]);
data.addRow([new Date(2013, 7, 1), 320353.540000000]);
data.addRow([new Date(2013, 8, 1), 310640.910000000]);
data.addRow([new Date(2013, 9, 1), 252187.700000000]);
data.addRow([new Date(2013, 10, 1), 301414.560000000]);
data.addRow([new Date(2013, 11, 1), 224296.850000000]);
data.addRow([new Date(2014, 0, 1), 291131.140000000]);
data.addRow([new Date(2014, 1, 1), 354750.680000000]);
data.addRow([new Date(2014, 2, 1), 312736.710000000]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
prefix: '£'
});
formatter.format(data, 1);
var dateFormatter = new google.visualization.NumberFormat({
pattern: 'MMM yyyy'
});
dateFormatter.format(data, 0);
var chartHeight = 400;
var chartWidth = 500;
var chartOptions = {
trendlines: {
0: {
color: 'green'
}
},
title: '1: TEST NAME',
isStacked: true,
width: chartWidth,
height: chartHeight,
colors: ['#0000D4'],
hAxis: {
title: 'Sales Value (£)',
slantedText: true,
slantedTextAngle: 45,
textStyle: {
fontSize: 10
},
format: 'MMM yyyy'
},
chartArea: {
left: 100,
top: 20,
width: (chartWidth - 10),
height: (chartHeight - 90)
}
};
revenueChart_93 = new google.visualization.LineChart(document.getElementById('CustomerRevenue_93'));
revenueChart_93.draw(data, chartOptions);
}
see it working here: http://jsfiddle.net/asgallant/j8N48/
check it out: Google charts trendline not showing
that says your first column cannot be a string because it is not a continuous domain axis.
I'm trying to create a graph that has the animation but also alternating colours
I am able to make the graph show alternating colours, but the second colour doesn't animate, it just appears after everything has loaded
my code:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawChart() {
// Create and populate the data table.
var option = {title:"Some Graph that doesn't actually show anything",
width:900, height:500,
animation: {duration: 2000, easing: 'out',},
vAxis: {title: "Yearly Spending"},
isStacked:true,
hAxis: {title: "Some Amount", minValue:0, maxValue:100},
series: [{color: '#5B6770', visibleInLegend: true}, {color: '#CF4520', visibleInLegend: true}]
};
var data = new google.visualization.DataTable();
data.addColumn('string', 'N');
data.addColumn('number', 'Percent');
data.addRow(['2003', 0]);
data.addRow(['2004', 0]);
data.addRow(['2005', 0]);
data.addRow(['2006', 0]);
data.addRow(['2007', 0]);
data.addRow(['2008', 0]);
data.addRow(['2009', 0]);
data.addRow(['2010', 0]);
data.addRow(['2011', 0]);
data.addRow(['2012', 0]);
data.addRow(['2013', 0]);
data.addColumn('number', 'Other');
// Create and draw the visualization.
var chart = new google.visualization.BarChart(document.getElementById('chart'));
chart.draw(data, option);
data.setValue(0, 1, 75);
data.setValue(1, 2, 55);
data.setValue(2, 1, 30);
data.setValue(3, 2, 75);
data.setValue(4, 1, 65);
data.setValue(5, 2, 20);
data.setValue(6, 1, 56);
data.setValue(7, 2, 75);
data.setValue(8, 1, 55);
data.setValue(9, 2, 63);
data.setValue(10, 1, 48);
chart.draw(data, option);
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id="chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
how can I make it so all the bars animate?
When you originally initialize the graph, you have null values in column 3 (since you add the graph but no row values). As a result, I don't think the API is animating those values. If you change your code as follows, it animates all the bars for me:
function drawChart() {
// Create and populate the data table.
var option = {title:"Some Graph that doesn't actually show anything",
width:900, height:500,
animation: {duration: 2000, easing: 'out',},
vAxis: {title: "Yearly Spending"},
isStacked:true,
hAxis: {title: "Some Amount", minValue:0, maxValue:100},
series: [{color: '#5B6770', visibleInLegend: true}, {color: '#CF4520', visibleInLegend: true}]
};
var data = new google.visualization.DataTable();
data.addColumn('string', 'N');
data.addColumn('number', 'Percent');
data.addColumn('number', 'Other');
data.addRows([
['2003', 0, 0],
['2004', 0, 0],
['2005', 0, 0],
['2006', 0, 0],
['2007', 0, 0],
['2008', 0, 0],
['2009', 0, 0],
['2010', 0, 0],
['2011', 0, 0],
['2012', 0, 0],
['2013', 0, 0]
]);
// Create and draw the visualization.
var chart = new google.visualization.BarChart(document.getElementById('chart'));
chart.draw(data, option);
data.setValue(0, 1, 75);
data.setValue(1, 2, 55);
data.setValue(2, 1, 30);
data.setValue(3, 2, 75);
data.setValue(4, 1, 65);
data.setValue(5, 2, 20);
data.setValue(6, 1, 56);
data.setValue(7, 2, 75);
data.setValue(8, 1, 55);
data.setValue(9, 2, 63);
data.setValue(10, 1, 48);
chart.draw(data, option);
}
I cleaned up the code a bit to make it easier to see what you are doing when defining the data, using the addRows method, and adding all the column assignments first. Otherwise the code is identical to yours.
I need to draw a chart to show the evolution of data in real time in a day. I've been playing in Google Charts Playground to see how it would be visualized, but I haven't been able to set the hAxis.viewWindow.max option, in order to make the X axis be fixed.
Here is the code I've been using to test:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'x');
data.addColumn('number', 'S0');
data.addColumn('number', 'S1');
data.addColumn('number', 'S2');
data.addRows([
[[0,0,0,0], 1, 1, 0.5],
[[1,0,0,0], 2, 0.5, 1],
[[2,0,0,0], 4, 1, 0.5],
]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10},
hAxis: {maxValue: [23,59,59,0], minValue:[0,0,0,0], viewWindow:{max: [23, 59, 59, 0]}}}
);
}
The documentation claims that hAxis.viewWindow.max receives numbers, but I haven't found a way to represent the "timeofday" type as a number.
Using that, the X axis goes from 0am to 2am, but I needed the axis to go until midnight.
I tried using "datetime" as the column type, with the same problem.
The sample below, using numbers, works the way I intended it to, drawing the line where my points are, but extending the grid until my max value:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'S0');
data.addColumn('number', 'S1');
data.addColumn('number', 'S2');
data.addRows([
[0, 1, 1, 0.5],
[1, 2, 0.5, 1],
[2, 4, 1, 0.5],
]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10},
hAxis: {maxValue: 23, minValue:0, viewWindow:{max: 23}}}
);
}
X axis will end up to your max value for it (or close in same cases - like this one). For example
in case of:
data.addRows([
[[0,0,0,0], 1, 1, 0.5],
[[1,0,0,0], 2, 0.5, 1],
]);
the x axis will end at 1:00
in case of:
data.addRows([
[[0,0,0,0], 1, 1, 0.5],
[[1,0,0,0], 2, 0.5, 1],
[[23,59,59,0], 4, 1, 0.5],
]);
it will end at 23:59:59 showing 22:00 as the last x axis label.
This means that no matter the value your define as max in hAxis, the chart runs up to the max "timeofday" value you have in your dataRows (actually the last added row).