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}]
});
}
Related
I want to implement the following chart in google chart api. how can i get it. I want to separate 4 quarters between two data points and indicators for each quarters need to display. And vertical line with number is that point has annotations. how can i get this in google chart api.
You can use an "annotation" role column to create the lines you want. Here's an example:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Year');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', 'Value');
data.addRows([
[2009, null, 5],
[2010, '1', 4],
[2011, null, 7],
[2011.25, '2', null],
[2011.5, '3', null],
[2012, null, 7]
]);
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(data, {
height: 400,
width: 600,
interpolateNulls: true,
annotation: {
1: {
style: 'line'
}
},
hAxis: {
format: '#',
minorGridlines: {
count: 3
},
ticks: [2009, 2010, 2011, 2012]
},
vAxis: {
textPosition: 'none',
minValue: 0,
maxValue: 10
},
legend: {
position: 'none'
}
});
};
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
See it working here: http://jsfiddle.net/asgallant/H5K29/
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'];
I am using linechart in google api chart. In this chart i need to display the vaxis value above point.but i am using annotation.It's create point value in near haxis .But i need above the point.
Actual chart:
Expected chart:
<script type="text/javascript">
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({type: 'number', role: 'annotation'});
data.addRows([
['2008', 23, 23],
['2009', 145, 145],
['2010', 245, 245],
['2011', 350, 350]
]);
var options = {
width: 400,
height: 100,
pointSize: 4,
legend: {position: 'none'},
chartArea: {
left: 0,
top: 10,
width: 400,
height: 50},
vAxis: {
baselineColor: '#fff',
gridlines: {color: 'transparent'}
},
tooltip: {trigger: 'none'},
annotation: {
1: {
style: 'none'
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
You simply have to correct the order of the column defintion:
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn({type: 'number', role: 'annotation'});
Edit: See asgallant's comment on the correct order of columns. My text below isn't fully correct.
Although Google's documentation isn't that clear about it, you should always specify the x-axis first, then the values and put stuff like annotations at the end.
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 am using corechart. When the pie chart appears, want to print the details of pie chart below the chart.
Example :
Want to print the details of chart in given form.
(color red) reading : 20% , (color blue) sleeping :30% , (color green) Playing :10%
and so on...
Could anyone please help me?
<script type="text/javascript">
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Investment');
data.addColumn('number', 'Amount');
data.addRows(5);
data.setValue(0, 0, 'Cash');
data.setValue(0, 1, 21217.31);
data.setValue(1, 0, 'GIC 9658');
data.setValue(1, 1, 2500.30);
data.setValue(2, 0, 'GIC 9657');
data.setValue(2, 1, 1515.18);
data.setValue(3, 0, 'Fund 5612');
data.setValue(3, 1, 5115.74);
data.setValue(4, 0, 'Fund 5617');
data.setValue(4, 1, 3032.33);
var formatter = new google.visualization.NumberFormat({prefix: '$'});
formatter.format(data, 1);
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, {
title: 'Distribution of Assets',
legend: {
position: 'left',
alignment:'end'
},
is3D: true,
pieSliceText: 'value',
pieSliceTextStyle:{color: '#FFFFFF', fontName: 'Sans-Serif', fontSize: 14},
legendTextStyle: {color: '#333333', fontName: 'Sans-Serif', fontSize: 14},
tooltipTextStyle: {color: '#666666', fontName: 'Sans-Serif', fontSize: 14},
chartArea:{left:0,top:0,width:"100%",height:"100%"}
});
}
google.setOnLoadCallback(drawVisualization);
</script>