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.
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 would like to assign a specific color to each column in a Google Bar Chart.
I was wondering what the best way is to go about doing this. I would like to include a color Hex code to each data point.
I have a jsfiddle below:
http://jsfiddle.net/zYS27/
var option = {
animation: {duration: 1000, easing: 'out',},
hAxis: {textStyle:{
fontName: 'Nunito',fontSize: '16' }},
legend: { position: "none" },
tooltip: {trigger: "none", textStyle:{
fontName: 'Nunito',fontSize: '16' }, isHtml: true},
bar: {groupWidth: "80%"},
vAxis: {format:'0%', minValue:0, viewWindowMode:'maximized', textStyle:{
fontName: 'Nunito',fontSize: '16' }, maxValue:1},
};
var formatter = new google.visualization.NumberFormat({
fractionDigits: 3,
pattern:'#,###%',
});
var data = new google.visualization.DataTable();
data.addColumn('string', 'N');
data.addColumn('number', 'Value');
data.addRow(['Orange', 0]);
data.addRow(['Red', 0]);
data.addRow(['Green', 0]);
data.addRow(['Blue', 0]);
data.addRow(['Purple', 0]);
// Create and draw the visualization.
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, option);
data.setValue(0, 1, 0.1);
data.setValue(1, 1, 0.3);
data.setValue(2, 1, 0.4);
data.setValue(3, 1, 0.4);
data.setValue(4, 1, 0.4);
chart.draw(data, option);
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
Use a "style" role column:
var data = new google.visualization.DataTable();
data.addColumn('string', 'N');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'style'});
data.addRow(['Orange', 0, 'color: #FF8000']);
data.addRow(['Red', 0, 'color: #FF0000']);
data.addRow(['Green', 0, 'color: #00FF00']);
data.addRow(['Blue', 0, 'color: #0000FF']);
data.addRow(['Purple', 0, 'color: #800080']);
fiddle: http://jsfiddle.net/asgallant/zYS27/1/
You can also specify the option.colors
option.color = ['#0f0', '#00f'];
How to give same colour in Google Visualization Stacked Bar Charts for different bar.
I also try to find Google but I not found any useful solution.I want like this..please Check this link: Chart Image
Maybe try as suggested in this answer: Google Charts - Change individual bar color
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'SalesMax');
data.addRows(4);
data.setValue(0, 0, '2004');
data.setValue(0, 1, 1000);
data.setValue(0, 2, 0);
data.setValue(1, 0, '2005');
data.setValue(1, 1, 1170);
data.setValue(1, 2, 0);
/* NEED TO MAKE THIS BAR RED? */
data.setValue(2, 0, '2006');
data.setValue(2, 1, 0);
data.setValue(2, 2, 1400);
data.setValue(3, 0, '2007');
data.setValue(3, 1, 1030);
data.setValue(3, 2, 0);
var chart = new google.visualization.BarChart(document.getElementById('visualization'));
chart.draw(data, {isStacked: true, width: 400, height: 240, title: 'Company Performance',
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
series: [{color: 'blue', visibleInLegend: true}, {color: 'red', visibleInLegend: false}]
});
}
How to set the line chart setting so lines begin at x:0 , and not in some random way?
Is there a prop for this, or i need to stack up more data????
If your x values are numeric you can give the option hAxis: {minValue:0} to the draw function :
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'Cats');
data.addColumn('number', 'Blanket 1');
data.addColumn('number', 'Blanket 2');
data.addRow([0, 1, 1, 0.5]);
data.addRow([1, 2, 0.5, 1]);
data.addRow([2, 4, 1, 0.5]);
data.addRow([3, 8, 0.5, 1]);
data.addRow([4, 7, 1, 0.5]);
data.addRow([5, 7, 0.5, 1]);
data.addRow([6, 8, 1, 0.5]);
data.addRow([7, 4, 0.5, 1]);
data.addRow([8, 2, 1, 0.5]);
data.addRow([9, 3.5, 0.5, 1]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 900, height: 400,
hAxis: {minValue:0},
vAxis: {maxValue: 10}}
);
}
Try this code here : http://code.google.com/apis/ajax/playground/?type=visualization#line_chart
I have setup a simple Google Chart by following the example on this page:
http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows([
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 860, 580],
['2007', 1030, 540]
]);
var options = {
width: 400, height: 240,
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
But now, after it's rendered, with some javascript i want to dynamically add another series of data. Can anyone point me in the right direction on how to do this?
The data i want to add, a number column with the number of employees, should show a new line in the chart, in another color and doesn't start at year 2004 but at 2005,
You need to add new data to 'data' variable and call the chart.draw() method again.
See the DataTable docs or play a bit at http://code.google.com/apis/ajax/playground/?type=visualization#line_chart
Example:
// Add columns
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
// Add empty rows
data.addRows(6);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, {v:new Date(2008,1,28), f:'February 28, 2008'});
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));
data.setCell(3, 0, 'Frank');
data.setCell(3, 1, new Date(2007, 11, 28));
data.setCell(4, 0, 'Floyd');
data.setCell(4, 1, new Date(2005, 3, 13));
data.setCell(5, 0, 'Fritz');
data.setCell(5, 1, new Date(2007, 9, 2));