I want all bars in the last column to have a certain color.
With the following code, only the topmost bar is styled (see http://jsfiddle.net/kalyfe/gvczd6nx/):
var data = google.visualization.arrayToDataTable([
['week', 'apples', 'bananas', {role: 'style'}],
['last week', 5, 17, ''],
['this week', 9, 22, ''],
['projection', 11, 27, 'color:#ddd;']
]);
How else would I apply styling to a column in a stacked bar?
Sets the style for apples bar, like the style for the bananas bar
var data = google.visualization.arrayToDataTable([
['week', 'apples', {role: 'style'}, 'bananas', {role: 'style'}],
['last week', 5, '', 17, ''],
['this week', 9, '', 22, ''],
['projection', 11, 'color:#ddd;', 27, 'color:#ddd;']
]);
http://jsfiddle.net/gvczd6nx/3/
if you want to set the style for each column independently then give the color value as #R3tep has mentioned but if you want it for group of columns then may be try like this:
var data = google.visualization.arrayToDataTable([
['week', 'apples', 'bananas','oranges'],
['last week', 5, 17, 11],
['this week', 9, 22, 12],
['projection', 11, 27,10]
]);
new google.visualization.ColumnChart(document.getElementById('chart')).
draw(data, {
title: "Weekly fruit intake",
width: 600,
height: 400,
isStacked: true,
colors: ['#0f0', '#ddd', '#ec8f6e', '#f3b49f', '#f6c7b6']
});
}
see demo here
also see this:https://developers.google.com/chart/interactive/docs/gallery/columnchart
Related
I want to show different texts on x-axis ticks and in tooltip, I tried setting up tick object in my data as {v: '2010', f: 'abc'}, but google column chart uses 'f' property for both axis label and tooltip. I want it to use 'v' for tooltip and 'f' for labels on x-axis.
Is there any option available to achieve this. Below is my simple reproduceable example.
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = google.visualization.arrayToDataTable([
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
'Western', 'Literature', { role: 'annotation' } ],
[{v: '2010', f: 'abc'}, 10, 24, 20, 32, 18, 5, ''],
[{v: '2020', f: 'deg'}, 16, 22, 23, 30, 16, 9, ''],
[{v: '2030', f: 'ghi'}, 28, 19, 29, 30, 12, 13, '']
]);
var options = {
width: 600,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
hAxis: {
format: function (val) {
console.log('val', val);
}
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
https://jsfiddle.net/0Luock3y/
instead of using a string for the value: '2010'
you'll need to use a number: 2010
this will allow you to customize the ticks in the options...
hAxis: {
ticks: [{v: 2010, f: 'abc'}, {v: 2020, f: 'deg'}, {v: 2030, f: 'ghi'}]
}
hAxis.ticks does not work when the x-axis value is a string
as for the tooltip, you can use the number value,
but here, I included the object notation,
so a comma is not displayed in the tooltip: 2,010
[{v: 2010, f: '2010'}, 10, 24, 20, 32, 18, 5, ''],
see following working snippet...
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = google.visualization.arrayToDataTable([
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
'Western', 'Literature', { role: 'annotation' } ],
[{v: 2010, f: '2010'}, 10, 24, 20, 32, 18, 5, ''],
[{v: 2020, f: '2020'}, 16, 22, 23, 30, 16, 9, ''],
[{v: 2030, f: '2030'}, 28, 19, 29, 30, 12, 13, '']
]);
var options = {
width: 600,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
hAxis: {
ticks: [{v: 2010, f: 'abc'}, {v: 2020, f: 'deg'}, {v: 2030, f: 'ghi'}]
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I am trying to display a series of data for a specific set of Dates, say for 15 or 30 Days. Now, I don't want to display all these dates on x-axis instead, because that will be too many and it will be difficult to understand, instead want to plot it on intervals so that y-axis data can fit correctly.
Below is how I was displaying everything which is looking clumsy and difficult to read
"xAxis": {
categories: [
'10 June',
'12 June',
'14 June',
'16 June',
'18 June',
'20 June',
'22 June'
]
},
"series": [
{
name: 'Total Students',
data: [1, 2, 1, 4, 3, 60]
}
]
Is there a way to make the x-axis populate dynamically to display a large range of dates? Kindly suggest.
You can use 'datetime' axis type and set x and y data in this way:
xAxis: {
type: 'datetime'
},
series: [{
name: 'Total Students',
data: [
[Date.UTC(2013, 8, 16), 0.7500],
[Date.UTC(2013, 8, 17), 0.7486],
[Date.UTC(2013, 8, 18), 0.7396],
[Date.UTC(2013, 8, 19), 0.7391],
[Date.UTC(2013, 8, 20), 0.7394],
]
}]
Live demo: http://jsfiddle.net/BlackLabel/xq52vagL/
API Reference: https://api.highcharts.com/highcharts/xAxis.type
How to create an area chart which has both normal area and "upside-down" area?
Already looked at their docs, but didn't find a solution there.
The end result should look like this:
You can see my current status in this jsfiddle.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Blue', 'Red'],
['0', 0, 20],
['2', 0, 20],
['4', 0, 20],
['6', 1, 19],
['8', 2, 18],
['10', 3, 17],
['12', 4, 16],
['14', 5, 15],
['16', 6, 14],
['18', 7, 13],
['20', 8, 12],
['22', 9, 11],
['24', 10, 10]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
The Google Charts AreaChart fills the area from the data line down or up to the baseline. But baselines (currently) only apply to axes, and you effectively want two different baselines, one at the top for one series and one at the bottom for the other series, so you'll have to do some trickery to get what you want.
Basically, target each series to a different axis, each with its own baseline, and align the two axes with the same viewWindow. Like so:
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxes: {
0: {viewWindow: { min: 0, max: 20 }, baseline: 0},
1: {viewWindow: { min: 0, max: 20 }, baseline: 20},
},
series: {
1: { targetAxisIndex: 1 }
}
};
See the update to your jsfiddle.
I'm trying to create a TreeMap using Google Charts that not only shows the parent label along with the children's color breakdowns, but also the children's labels. I basically want this (save possible children coloration):
I haven't found any online examples or questions on it, is this possible?
not sure that you can get exactly like the picture,
but if you want to show both the parent and child labels,
use option --> maxDepth: 2
note: duplicate child id's are not allowed,
here, object notation is used to provide a unique id,
but still display the same name on multiple nodes
{v: 'Rick0', f: 'Rick'}
{v: 'Rick1', f: 'Rick'}
where...
v: = value
f: = formatted value
see following working snippet...
google.charts.load('current', {
packages: ['treemap']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Person', 'Fruit', 'Size', 'Color'],
['Global', null, 0, 0],
['Bananas', 'Global', 0, 0],
[{v: 'Rick0', f: 'Rick'}, 'Bananas', 100, 0],
[{v: 'Anne0', f: 'Anne'}, 'Bananas', 40, 0],
[{v: 'Peter0', f: 'Peter'}, 'Bananas', 5, 0],
['Apples', 'Global', 0, 0],
[{v: 'Anne1', f: 'Anne'}, 'Apples', 20, 2],
[{v: 'Peter1', f: 'Peter'}, 'Apples', 20, 2],
[{v: 'Rick1', f: 'Rick'}, 'Apples', 15, 2],
['Oranges', 'Global', 0, 0],
[{v: 'Rick2', f: 'Rick'}, 'Oranges', 20, 1],
[{v: 'Peter2', f: 'Peter'}, 'Oranges', 20, 1],
[{v: 'Anne2', f: 'Anne'}, 'Oranges', 10, 1],
['Susanne', 'Global', 10, null]
]);
tree = new google.visualization.TreeMap(document.getElementById('chart_div'));
tree.draw(data, {
maxDepth: 2,
minColor: 'yellow',
midColor: 'orange',
maxColor: 'red',
noColor: 'lime',
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I have a requirement to limit the data points in highchart when it displayed due to space issue. Let's say if I have 100 data points in one series. I just want to display first 5 and when clicking on the expand button(I need to add a expand button in the chart) the highchart will display with all 100 points. (The expanded view will be in a modal window and the modal window will have the full hight).
I know the series are complex like, I can have multiple series in the to chart like this
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2012',
data: [1052, 954, 4250, 740, 38]
}]
and I can have complex data model like this
1.data: [1052, 954, 4250, 740, 38]
2.data: [[5, 2], [6, 3], [8, 2]]
3.
data: [{
name: 'Point 1',
color: '#00FF00',
y: 0
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
Note: Am not setting the series, am creating a widget in JavaScript which includes Highchart inside it. I can override the Highchart code for this.