Sub divide a pie section Google Charts - javascript

Is it possible to further divide a pie section?
I have data to show on the pie chart:
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Sleep', 7],
['Other', 4]
If I want to subdivide the 'Other' section of pie chart into:
['Commute', 2],
['Watch TV', 2]
Is that possible?
EDIT:
function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Other', 4], ['Sleep', 7] ]); var options = { title: 'My Daily Activities' }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); }

Related

How to create a continuous line in a bar chart using combocharts?

Here's my code, I want to create a continuous line like a goal in my chart, I followed the example posted in Google Charts. Do I need to create a function to do that?
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['TV', 4],
['Gym', 2],
['Sleep', 8]
]);
var options = {
title:'My Average Day',
vAxis: {title: 'Tasks'},
hAxis: {title: 'Hours per Day'},
seriesType:'bar',
series:{4:{type:'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart1'));
chart.draw(data, options);
}

seriesType should be "bars" not "bar" and your data should looks like this to draw line for 'Sleep' for example:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day', 'Sleep'],
['Work', 8, 8],
['Eat', 2, 8],
['TV', 4, 8],
['Gym', 2, 8],
]);
var options = {
title:'My Average Day',
vAxis: {title: 'Tasks'},
hAxis: {title: 'Hours per Day'},
seriesType:'bars',
series:{1:{type:'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart1'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart1" style="width: 900px; height: 500px;"></div>

How to put 2 google charts on one page

I learn how to create bar and pie chart from https://developers.google.com/chart/interactive/docs/gallery/columnchart and
https://developers.google.com/chart/interactive/docs/gallery/piechart.
But I just couldn't get two charts on the same page.My code is as follow:
<html>
<head>
<!--pie chart-->
<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([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new
google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<!--bar chart-->
<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.setOnLoadCallback(drawBar);
function drawBar() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
};
var chart = new
google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<br>
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>
Can someone give me some suggestion?
Many thanks.

first, only need to reference loader.js one time
and only need one load statement
which can load as many 'packages' as needed
once the callback fires, you can start drawing
see following working snippet...
google.charts.load('current', {
callback: function () {
drawChart();
drawBar();
},
packages: ['bar', 'corechart']
});
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'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
function drawBar() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<br>
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>

VM5111:1249 Uncaught TypeError: Cannot read property 'x' of null

Hello i have this error and cannot seem to understand it. I am learning google pie charts and was able to use the sample provided by google api. But now i intend to hover the div and make the piechart explode. when the mouse leaves the div it returns to a normal piechart. But having an error when i hover over the div.
Below is my code:
$(document).ready(function() {
google.charts.load('current', {'packages':['corechart']});
google.charts.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'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
var div1 = document.getElementById('piechart');
$(div1).mouseover(function(){
google.charts.setOnLoadCallback(drawChart1);
});
function drawChart1() {
var data = google.visualization.arrayToDataTable([
['Language', 'Speakers (in millions)'],
['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
]);
var options = {
title: 'Indian Language Use',
legend: 'none',
pieSliceText: 'label',
slices: { 4: {offset: 0.2},
12: {offset: 0.3},
14: {offset: 0.4},
15: {offset: 0.5},
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
});
<div id="piechart" style="width: 900px; height: 500px;"></div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="pie_chart.js"></script>

here's an example using both mouseover and mouseout on the same chart
using full page view, it doesn't appear to work very smoothly, doesn't always capture mouseout...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
backgroundColor: 'cyan',
title: 'My Daily Activities',
legend: 'none'
};
var data1 = google.visualization.arrayToDataTable([
['Language', 'Speakers (in millions)'],
['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
]);
var options1 = {
backgroundColor: 'cyan',
title: 'Indian Language Use',
legend: 'none',
pieSliceText: 'label',
slices: {
4: {offset: 0.2},
12: {offset: 0.3},
14: {offset: 0.4},
15: {offset: 0.5},
},
};
var div1 = document.getElementById('piechart');
var div2 = document.getElementById('msg');
$(div1).mouseover(function(){
div2.innerHTML = 'over'
chart.draw(data1, options1);
});
$(div1).mouseout(function(){
div2.innerHTML = 'out'
chart.draw(data, options);
});
var chart = new google.visualization.PieChart(div1);
chart.draw(data, options);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart"></div>
<div id="msg"></div>

bootstrap using google graph error: this.q.Ee is not a function in

How to solve this error
Error: for this.q.Ee is not a function when more then one google char using
There is my bundles
</script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Water Usage');
data.addRows([
[1, 23], [1, 10], [2, 23],
[3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33],[9, 10],[10, 80],[11, 20],
[18, 52], [19, 54], [20, 42],
[21, 55], [22, 56], [23, 57],[25,0],[27,0],
[30, 80]
]);
var options = {
width: 600,
height: 150,
hAxis: {
title: 'Days'
},
vAxis: {
title: 'Water Details'
}
};
var chart = new google.visualization.LineChart(document.getElementById('ex012'));
chart.draw(data, options);
}
</script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month','Usage'],
['Jan','20'],
['Feb','45'],
['Mar','80'],
]);
var chart = new google.charts.Bar(document.getElementById('barchart1'));
chart.draw(data);
}
</script>
And how to change google api chart sizes for user wish, how to implement single bar chart and that bar will showed on ther different color

Just change that google.load("visualization", "1.1", {packages:["bar"]}); to google.load("visualization", "1.1", {packages:["bar"]}); to

Google pie chart data table values

In Google website the code for creating a pie chart is:
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'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
I have a global var that I would like to set it's value and insert the new value to the chart, for instance:
var tmp=MyGlobalVariable+10;
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', tmp],
['Eat', 3],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
Every time I use the tmp var it eliminates the 'work' from the chart.
How can I dynamically set the data table values?

The google chart library renders an SVG from a dataset.
If you want to change the svg, you will have to 'redraw (drawChart())' the chart.
a small example (untested, and proably buggy due to not a lot of time):
window.myChart = {
data : [
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
],
options : {
title: 'My Daily Activities'
},
chart : null,
init : function(elId) {
this.chart = new google.visualization.PieChart(document.getElementById(elId));
this.drawChart();
},
drawChart : function()
{
this.chart.draw(this.data, this.options);
}
};
usage:
google.load("visualization", "1", {packages:["corechart"]});
myChart.init('my-chart-id')
google.setOnLoadCallback(myChart.drawChart);
Then everytim you want to change some data:
mychart.data['work'] = 10;
mychart.drawChart();

Categories