I am creating a multilevel donut chart with google charts.
I am successful to creating a single level chart. But now I have to create another chart in that chart.
Please help me. And also is that possible to write text on chart slice in circular form?
here is my code for single donut chat.
HTML
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="donutchart" style="width: 900px; height: 500px;"></div>
JS
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
pieHole: 0.4,
chartArea:{left: '100'},
pieSliceText: 'label',
pieStartAngle: 0,
pieSliceTextStyle:{color: 'white', fontName: 'arial', fontSize: 10}
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
and here is code link in JsFiddle
IT should be look like
This was possible with the Google Image Charts API, which has been deprecated in 2012. It seems to still be up and running, it's just not maintained anymore.
With that API, it was (and still is) possible to create concentric pie charts such as the one below
http://chart.apis.google.com/chart?chd=s:Yr3,ff9&cht=pc&chs=300x200&chxr=0,20,45|1,25,50
which yields the following pie chart
Also you can play with the API and easily create your own pie charts here:
http://www.jonwinstanley.com/charts/
Supporting this kind of concentric Pie chart in the new Google Charts API is still an open issue
I know it's has been a long time ago but here's one way you can do this, using google charts:
But, I removed the subtitles because they interfere in the position of objects, i think it's easier and better if we do our subtitles . Then i just made some drawings e maths to achieve this.
You can control the size and pieHole with 3 variables.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
//control is here
let larguraGraficoFora = 400;
let alturaGraficoFora = 400;
let furoGraficoFora = 0.6;
var data = google.visualization.arrayToDataTable([
['Sabor de Pizza', 'Quantidade'],
['portuguesa', 30],
['frango com catupiry', 30],
['calabresa', 30],
['alguma doce', 30],
]);
var options = {
width: larguraGraficoFora,
height: alturaGraficoFora,
chartArea:{left:0,top:0,width:'100%',height:'100%'},
pieHole: furoGraficoFora,
legend: 'none'
};
var chart = new google.visualization.PieChart(document.getElementById('donut_1'));
chart.draw(data, options);
var data2 = google.visualization.arrayToDataTable([
['Effort', 'Amount given'],
['python', 20],
['c#', 20],
['javascript', 20],
['php', 20],
['sql server', 20],
]);
var options2 = {
legend:'none',
width: larguraGraficoFora*furoGraficoFora,
height: alturaGraficoFora*furoGraficoFora,
chartArea:{left:0,top:0,width:'100%',height:'100%'},
backgroundColor: 'transparent',
legend: 'none'
};
var chart2 = new google.visualization.PieChart(document.getElementById('donut_2'));
chart2.draw(data2, options2);
ajustePosicaoPieCentral(larguraGraficoFora, alturaGraficoFora, furoGraficoFora);
}
function ajustePosicaoPieCentral(largura, altura, furo){
yt = altura*(1+furo)/2.0;
xt = largura*(1-furo)/2.0;
var css = document.getElementById('donut_2');
css.style.transform = "translate("+xt+"px, -"+yt+"px)";
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donut_1" ></div>
<div id="donut_2"></div>
Related
I want to draw a simple column chart in HTML-JavaScript using google chart.I have used Google materiel chart CDN to draw a column chart having 4 rows with 4 different colors.
I have tried plenty of options but nothing is working properly. when I have used the colors: ['#b0120a', '#004411', '#ffab91', '#004411'] only the first color is being displayed in all the 4 columns. I have also tried {role:'style'} but still not working.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
//google.charts.load('current', {'packages':['bar']});
google.charts.load('visualization', '1', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
/*var data = google.visualization.arrayToDataTable([
['Class', 'Total',{role: 'style'}],
['A', 10,'color: #b0120a'],
['B', 30,'color: #004411'],
['C', 20,'color: #ffab91'],
['D', 30,'color: #004411']
]);*/
var data = google.visualization.arrayToDataTable([
['Class', 'Total'],
['A', 10],
['B', 30],
['C', 20],
['D', 30]
]);
var options = {
isStacked: true,
title: 'Class wise total students',
colors: ['#b0120a', '#004411', '#ffab91', '#004411'],
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 100%; height: 100%;"></div>
</body>
</html>
The chart is like:
But I want 4 different colors for 4 columns.
Thanks in advance.
Yaa, at last I made this one correct and exactly I wanted to be. Please see the code below, if you required sometime.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('visualization', '1.1', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Class', 'Total',{role: 'style'}],
['A', 10,'color: #b0120a'],
['B', 30,'color: #004411'],
['C', 20,'color: #ffab91'],
['D', 30,'color: #004411']
]);
var options = {
isStacked: false,
title: 'Class wise total students',
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 100%; height: 100%;"></div>
</body>
</html>
I need to changed the definition of chart here. From var chart = new google.charts.Bar(document.getElementById('columnchart_material')); to the modified one as var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));. It's working now.
The chart is like ....
I'm trying to build a javascript function to build some graphs using google charts on my webpage.
This is what I have done.
<script type="text/javascript">
google.load("visualization", "1.1", {packages: ["bar"]});
google.setOnLoadCallback(drawStuff);
function drawStuff() {
var data2 = <?php echo json_encode($final_array); ?>;
for(i=0;i<data2.length-1;i++) {
console.log(data2[i]);
var name = 'data'+i;
name = new google.visualization.arrayToDataTable([
['', ''],
["$50", data2[i]['calc']['savings']],
["$54", 31],
["$10", 12],
["$11", 10],
['$31', 3]
]);
var optionsname = 'options'+i;
optionsname = {
width: 150,
legend: {position: 'none'},
// chart:
axes: {
x: {
0: {side: 'top'}
// Top x-axis.
}
},
bar: {groupWidth: "90%"}
};
var chartname = 'chart'+i;
chartname = new google.charts.Bar(document.getElementById('columnchart_material.'+i));
// Convert the Classic options to Material options.
chartname.draw(name, google.charts.Bar.convertOptions(optionsname));
}
};
</script>
Since the data is in an array and I need to display it on multiple places within the same page, I've used for loop. All the variable names are generated properly and as per the guidelines. But at any point I'm able to see only one instance of the graph on the page. How do I overcome this?
You can see in this fiddle
In the year 2004 I have values of 1000, and in the other years I have large values, for that reason in the scale the chart doesn't seems able to rendered, what can I do to show those values. I was reading this. Is there a way to do something like that in google chart?
Here is the code
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 1000],
['2005', 1170000, 460000],
['2006', 660000, 1120000],
['2007', 1030000, 540000]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
The chart
Google Chart´s axis have an option to set scale to logarithm, which fits better for big differences between lowest and highest values. Note that all values must be positive and if the data value is 1, it won´t show as logharithm scale starts at 1 or higher. To change it, use:
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}, logScale:true}
You can find the documentation in configuration options section:
Google Chart Configuration Options
I am trying to create a linked view in Google Chart. What a linked view is selecting a part of visualization, let's say in a pie chart, and the same is selected (or highlighted) in the linked view, which let's say is the bar chart. I am a novice at Google Charts and I don't know how to use JavaScript too. I picked up the code from the Google Documentation and did some modifications in it. But it does not seem to work. The code is as follows:
<!DOCTYPE HTML>
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
google.setOnLoadCallback(drawChart2);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
var chart2 = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
function drawChart2() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
You need to use "select" event handlers to link the two charts together, like this:
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {
title: 'How Much Pizza I Ate Last Night',
width: 400,
height: 300
};
// Instantiate and draw our chart, passing in some options.
var chart1 = new google.visualization.PieChart(document.getElementById('chart_div_1'));
var chart2 = new google.visualization.BarChart(document.getElementById('chart_div_2'));
// set up event handlers
// when a user clicks on the PieChart, set the selection on the BarChart
google.visualization.events.addListener(chart1, 'select', function () {
var selection = chart1.getSelection();
for (var i = 0; i < selection.length; i++) {
// add in column information to specify selection in BarChart
selection[i].column = 1;
}
chart2.setSelection(selection);
});
// when a user clicks on the BarChart, set the selection on the PieChart
google.visualization.events.addListener(chart2, 'select', function () {
var selection = chart2.getSelection();
for (var i = 0; i < selection.length; i++) {
// remove column information for selection in PieChart
selection[i].column = null;
}
chart1.setSelection(selection);
});
chart1.draw(data, options);
chart2.draw(data, options);
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
You need two divs in your HTML, one for each chart:
<div id="chart_div_1"></div>
<div id="chart_div_2"></div>
See working example here: http://jsfiddle.net/asgallant/S78sB/
I use Google Chart Tools to draw simple graph with some missing data. With my code, I get something like on this image:
Is it possible to connect points (1) and (4) with line similar to (4) - (5) connection? Maybe I could use another type of graph to achieve the same result? I tried Area Chart with interpolateNulls option, but the result was the same. It can interpolate only NULLs surrounded by some date, not two or more NULLs in a row.
Below is sample code:
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Year');
data.addColumn('number', 'Sales');
data.addRows([
[1, 1000],
[2, null],
[3, null],
[4, 1030],
[5, 1080]
]);
var options = {
'title' : 'Line chart',
'width' : 400,
'height' : 300,
'lineWidth' : 2
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<html>
<body>
<div id="chart_div"></div>
</body>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</html>
Similar problem here:Google chart line: how to connect dots properly using a continuous axes
The answer to your question was on one of the comments:
'If the value you are trying to pass is through some xml or json and it has null values inside it will not plot properly and will be scattered or as dotted lines in line graph so to plot them, have a condition to remove all null values and then it will plot correctly.' by #Taher SK