I'm looking for a way to consistently color the last slice in a google pie chart. The last slice is titled other and I won't always know how many other slices are showing. I set up the following bin...
http://jsbin.com/sugere/1/
<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([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Other', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawChart2);
function drawChart2() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Other', 2]
]);
var options = {
title: 'My Daily Activities 2'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart2'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<div id="piechart2" style="width: 900px; height: 500px;"></div>
</body>
</html>
I considered making Other the first item that comes back which would allow me to target the first item's color, but then I would need some way of rotating the pie chart back. As far as I can tell you can only do that by percentage and not by number of slices.
If you want to change color of the slice you have an option on this chart.
Link
https://developers.google.com/chart/interactive/docs/gallery/piechart
Example
slices: [{color: 'black', {}, {}, {color: 'red'}] // order of the slice
slices: {0: {color: 'black'}, 3: {color: 'red'}} // number of the slice
Your code modified
I am taking the liberty to change all color on the first chart and just change the last slice.
<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([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Other', 7]
]);
var options = {
title: 'My Daily Activities',
slices: {
0: { color: 'blue' },
1: { color: 'red' },
2: { color: 'orange' },
3: { color: 'grey' },
4: { color: 'black' }
}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawChart2);
function drawChart2() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Other', 2]
]);
var options = {
title: 'My Daily Activities 2',
slices: {
3: { color: 'black' }
}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart2'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<div id="piechart2" style="width: 900px; height: 500px;"></div>
</body>
</html>
I believe you are looking for pieResidueSliceColor
See https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#configuration-options
This is the color for the 'Other' category for the data meeting your specified threshold.
However, if you are not using the threshold other then to use Hann's option you could just figure out the index of your last data point array and use the slices:{idxYourFiguredOut:{fontColor:'red'}} but the api has something built in.
Related
I can able to create a 3d pie chart using google charts,but while rotating it's converting to 2d pie chart even though i set the options is3D:true, can anyone please help me how to fix this issue.
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',
is3D: true,
pieHole: 0.25,
pieStartAngle: 0,
animation:
{
startup: true,
duration: 2000,
easing: 'out'
}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
google.visualization.events.addListener(chart, 'ready', function () {
if (options.pieStartAngle < 360) {
options.pieStartAngle++;
// options.is3D = true;
setTimeout(function () {
// options.is3D = true;
chart.draw(data, options);
}, 1);
}
});
// options.is3D = true;
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart" style="width: 900px; height: 500px;"></div>
how do I dynamically add rows to the google pie chart on each time the data is pulled by ajax call?
html
<div id="piechart" style="width: 900px; height: 500px;"></div>
google pie chart
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 = {
'width': 900,
'height': 500
// pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
now instead of I want dynamic adding of rows as soon as page is loaded a should add new values fetched from ajax query like this:
ajax call
function getPieChartData() {
$.ajax({
url: pieChartData,
headers: {
token: token,
params: JSON.stringify({
"ads":[2,3],"start_date":"2018-01-01"
})
},
type: "GET"
}).then((response)=> {
r = JSON.parse(response);
let data = r.data
if(data.length >0){
}
})
}
by default, google.charts.load will wait for the page to load,
we can use this in place of $(document).ready or similar functions.
once google charts has loaded, go ahead and create the data table, chart, options, etc.,
then get the data.
assuming the data is an array of arrays, similar to the example you provided,
you can simply use data table method addRows to add the data to the data table.
e.g.
data.addRows([
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
or...
data.addRows(r.data);
if it is a single array or one row, use addRow
data.addRow(['Work', 11]);
the full snippet might look something like this...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category');
data.addColumn('number', 'Value');
var options = {
width: 900,
height: 500
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
getPieChartData();
function getPieChartData() {
var pieChartData = 'some url';
var token = 'some token';
$.ajax({
url: pieChartData,
headers: {
token: token,
params: JSON.stringify({
"ads":[2,3],"start_date":"2018-01-01"
})
},
type: "GET"
}).then((response)=> {
r = JSON.parse(response);
if (r.data.length > 0){
data.addRows(r.data);
chart.draw(data, options);
}
});
}
});
I am using screenfull.js to allow a Google chart to be viewed in fullscreen.
I want the chart to use 100% of the screen width/height when in full screen mode but be a specific size otherwise (width: 100%; height: 200px). The problem is that my current code results in black bars above and below the chart in fullscreen mode. What am I doing wrong?
My fiddle is here
HTML:
<html>
<body>
<input type="button" value="Full Screen Mode" id="button1">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/screenfull.js/1.0.4/screenfull.min.js"></script>
<script>
</script>
<div id="piechart" style="width: 100%; height: 200px;"></div>
</body>
</html>
Javascript (which adapts the Google pie chart example code):
$(function() {
$('#button1').click(function() {
screenfull.request(document.getElementById('piechart'));
})
})
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);
$(window).resize(function() {
chart.draw(data, options);
});
}
the style attribute on the chart's container will need to be changed once in full screen mode,
or else it will still be height: 200px;
let's use a css class instead, then we can listen for screenfull's 'change' event,
and switch the class name, then re-draw the chart, just to be safe
screenfull.on('change', function () {
if (screenfull.isFullscreen) {
chartContainer.className = 'chart-full';
} else {
chartContainer.className = 'chart-normal';
}
drawChart();
});
next, the chart will not fill the container completely by default,
we can use the following config options to maximize the chart
chartArea: {
height: '100%',
width: '100%',
top: 48,
left: 16,
right: 16,
bottom: 16
},
height: '100%',
width: '100%'
see following snippet...
js
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
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',
chartArea: {
height: '100%',
width: '100%',
top: 32,
left: 16,
right: 16,
bottom: 16
},
height: '100%',
width: '100%'
};
var chartContainer = $('#piechart').get(0);
var chart = new google.visualization.PieChart(chartContainer);
$('#button1').click(function() {
if (screenfull.enabled) {
screenfull.request(chartContainer);
screenfull.on('change', function () {
if (screenfull.isFullscreen) {
chartContainer.className = 'chart-full';
} else {
chartContainer.className = 'chart-normal';
}
drawChart();
});
}
})
drawChart();
$(window).resize(drawChart);
function drawChart() {
chart.draw(data, options);
}
});
css
.chart-normal {
height: 200px;
}
.chart-full {
height: 100%;
}
html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/screenfull.js/3.3.2/screenfull.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<input type="button" value="Full Screen Mode" id="button1">
<div class="chart-normal" id="piechart"></div>
working fiddle --> https://jsfiddle.net/0m3x6aea/
I have a pie chart that contains various values. When hovering over a slice of the pie, the value is displayed. I'd like to make the value displayed a percentage. For example, I want 11 to be 11%. Is it possible to add a percent symbol to all values when hovering over the slice? Here's my jsFiddle.
HTML
<div id="chart_div" 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',
tooltip: {
text: 'value'
}
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
the tooltip will display the formatted value of the row by default
format the data table column before drawing the chart...
var formatNumber = new google.visualization.NumberFormat({
suffix: '%',
fractionDigits: 0
});
formatNumber.format(data, 1);
see following working snippet...
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 formatNumber = new google.visualization.NumberFormat({
suffix: '%',
fractionDigits: 0
});
formatNumber.format(data, 1);
var options = {
title: 'My Daily Activities',
tooltip: {
text: 'value'
}
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Curious about your use case, but this works. Google visualization allows you to add custom labels for each data point.
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day')
data.addColumn({type:'string', role:'tooltip'})
data.addRows([
['Work', 11, '11%'],
['Eat', 2, '2%'],
['Commute', 2, '2%'],
['Watch TV', 2, '2%'],
['Sleep', 7, '7%']
]);
var options = {
title: 'My Daily Activities',
tooltip: {
text: 'value'
}
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.google.com/jsapi?fake=.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
I am using google charts and google table for my project. The problem is that, I am not able to display two google charts and one google table on a single page. How can this be solved?
My code:
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages': ['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(<?= $jsonTable ?>);
var options = {
title: ' Audit Schedule ',
is3D: 'true',
width: 500,
height: 250
};
// Instantiate and draw our chart, passing in some options.
// Do not forget to check your div ID
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</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',
width: 501.2,
height: 250
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<script type="text/javascript">
google.charts.load('current', {'packages': ['table']});
google.charts.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v: 8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}
</script>
//html code
<div id="piechart" style="margin-top: -300px; margin-left:490px;"></div><br>
<div class="chart-wrapper">
<div id="chart" style="width:1006px; height:400px; margin-left: -15px"></div>
</div><br>
<div id="table_div"></div>
Link to google charts: https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart#column-styles
You have defined multiple instances of google.charts.setOnLoadCallback(). This function should only be defined ONCE in your code, because otherwise you'll be overwriting the callback event everytime. Anyway, you should wrap all your chart drawing functions in something like :
function drawCharts(){
drawchart1();
drawchart2();
drawwhateveryouwant();
}
google.setOnLoadCallback(drawCharts);
Also, I might have to point out that you have two functions with the same name ^^, you might want to correct that. Other than that, you might want to call all your chart packages at once by doing this since I also noticed that you were loading the same package twice, which is a waste of resources even if it doesn't stop your code from functioning correctly :
google.load('visualization', '1', {'packages': ['corechart','table']});
I modified your code a bit to help you towards achieving desired results :
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="piechart"></div>
<div id="table_div"></div>
</body>
<script>
google.charts.setOnLoadCallback(init);
google.charts.load('current', {'packages':['corechart','table']});
//Function to draw piechart
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',
width: 501.2,
height: 250
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
};
//Function to draw table
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v: 8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}
//Function to initialize everything
function init(){
drawTable();
drawChart();
}
</script>
</html>
You'll forgive me for skipping the chart with JSON data though :p