Menu
Hi I'm trying to apply color's in the slices of my pie chart. I'm using Google Charts API.
Here you got all the pie chart information: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart
And here is is a shortcut about what I'm talking:
slices Array of objects, or object with nested objects {} An array of objects, each describing the format of the corresponding slice in the pie. To use default values for a slice, specify an empty object {}. If a slice or a value is not specified, the global value will be used. Each object supports the following properties:
color - The color to use for this slice. Specify a valid HTML color string. textStyle - Overrides the global pieSliceTextSlice for this slice. You can specify either an array of objects, each of which applies to the slice in the order given, or you can specify an object where each child has a numeric key indicating which slice it applies to. For example, the following two declarations are identical, and declare the first slice as black and the fourth as red:
slices: [{color: 'black', {}, {}, {color: 'red'}] slices: {0: {color: 'black'}, 3: {color: 'red'}}
Don't know where I should put this code, here's the playground: https://code.google.com/apis/ajax/playground/?type=visualization#pie_chart
This is my attemp(which does not work)
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, {title:"So, how was your day?", slices: [{color: 'black', {color: 'blue'}, {color: 'green'}, {color: 'red'}, {color: 'white'}]});
}
Thanks for your time. ////////////////////////////////////////////////////////////////////////////////////////
EDIT:
<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],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
slices: {0: {color: '#006EFF'}, 1:{color: '#00FF08'}, 2:{color: 'blue'}, 3: {color: 'red'}, 4:{color: 'grey'}}
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Note: I used
slices: {0: {color: '#006EFF'}, 1:{color: '#00FF08'}, 2:{color: 'blue'}, 3: {color: 'red'}, 4:{color: 'grey'}}
instead
slices: [{color: 'black', {}, {}, {color: 'red'}]
See you.
835
You can change the color of the lines that connect data points in Google Charts in two subtly different ways: with the colors option to change the chart palette, or with the series option to specify the color for particular series. In the following chart, we set the color of each series explicitly.
A pie chart is a circle with one or more slices, and each slice is sized to show its share of the overall total amount.
You can use following to change default color of pie chart slices:
var options = {
width: 400,
height: 240,
title: 'Toppings I Like On My Pizza',
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
