I have a sample google visualization combo chart in this fiddle where the chart is draws as given below:
var chart = new google.visualization.ComboChart(document.getElementById('visualization'));
chart.draw(data, {
title : 'Yearly Coffee Production by Country',
width: 600,
height: 400,
vAxis: {title: "Cups"},
hAxis: {title: "Month"},
seriesType: "bars",
isStacked: true,
});
The above chart contain normal tooltip. But I am trying to format the tooltip as follows,
when museovering on first stack and so on. What is the procedure to achieve it?
Related
I am developing a layered column chart using ComboChart on Angular google charts. Although I've separated two series of bar charts in two different axis, being able to find a bar in front of the other, like needed, I can't change the width of one of the series only. I want a result like the amCharts Layered Column Chart:
Layered Column Chart example
Right now, the chart looks like:
Current chart - Angular google charts
Also, if there is a way to share the same y axis while keeping one bar in front of the other, instead of staking then, it would be great.
The code I've been using for options of the angular google chart:
this.options =
{
colors: ['#1E90FF', '#f39800'],
hAxis: {
title: 'haxisTitle',
type: 'category'
},
vAxis:{
title: 'Value',
minValue: 0,
format: this.numberFormat
},
seriesType: 'bars',
bar: {1: {groupWidth: "30"}},
series:
{
0: {
targetAxisIndex: 0
},
1: {
targetAxisIndex: 1,
}
},
vAxes: {
0: {
title: 'Altered Value',
label:'Altered Value',
viewWindow: { // <-- set view window
min: 0,
max: this.maxValue + 0.1*this.maxValue, // Sets the maximun value of altered or real value to the window size (both axis)
},
format: this.numberFormat,
type: 'bars'
},
1: {
title: 'Real Value',
label:'Real Value',
viewWindow: { // <-- set view window
min: 0,
max: this.maxValue + 0.1*this.maxValue,
},
format: this.numberFormat,
type: 'bars'
}
},
aggregationTarget: 'auto',
stackSeries: true,
isStacked : true,
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
keepInBounds: true,
maxZoomIn: 4.0
}
};
}
The chart shows the data correctly, the only problem is the layout.
Some reference that might help:
Google Developers - Visualization: Combo Chart
amCharts Layered Column chart
Overlapped bars - Stack overflow quote - Here the result was a stacked bar chart (something I don't want)
Have tried the following:
hAxis: {slantedText: true, slantedTextAngle: 90}
However this only works for core charts
I once needed to set the title on the material chart and used this work around:
series: {
0: {targetAxisIndex: 0},
},
vAxes: {
// Adds titles to each axis.
0: {title: '# of Successes'},
},
Wondering if the solution involves manipulating the code above
var options = {
title: 'Nombre d emails par jour',
hAxis: {title: 'Jour', titleTextStyle: {color: '#333'}, slantedText: true},
vAxis: {minValue: 0},
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
I've been trying to find an answer to this, but I have had no such luck. I was wondering if it is at all possible to add some customization to a legend of a Chart with google scripts? If so could maybe you guys point me in the right direction of how to accomplish this? thanks in advance.
here are the options that I have set so far.
options = {'title':'Production',
'width':1366,
'height':768,
'vAxis': {'format': '$#,##0.00;($#,##0.00)',
'title': 'Money'},
'hAxis': {'title': 'Month'}
};
Sincerely,
Sicariuxs
Here is an example of how you can use to customize the legend of the chart with Google Charts:
var options = {
//sliceVisibilityThreshold: 0.01,
chartArea:{left:10,top:0,width:'100%',height:'100%'},
height: 300,
legend: { position: 'right', textStyle: {fontSize: 7}},
pieSliceText: 'none',
colors:['#03A9F4','#0091EA']
};
I'm drawing a barchart representing the homicide rate in the U.S.A..
I'm trying to truncate this chart by setting the baseline at > 0 but the code:
var options = {
chart: {
title: 'Intentional homicide rate per 100,000 population, by country/territory (2000-2013) in the US',
subtitle: 'Intentional homicide is defined as unlawful death purposefully inflicted on a person by another person',
hAxis: {title: 'Year'},
vAxis: {
title: 'Rate per 100,000',
viewWindow:{
max:20,
min:2
},
// ticks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
},
}
};
doesn't do its job and shows the whole range contrarily to my aim.
This is the complete code of the chart.
What did I mistake?
The same procedure works with an area chart (Pluckr example)... how come?
Your code isn't proper, as stated in other answers.
You need to use the function google.charts.Bar.convertOptions when working with material charts. Source (scroll down a bit, or ctrl + f for convertOptions).
You're currently drawing the chart with
chart.draw(data, options);
while the correct way would be
chart.draw(data, google.charts.Bar.convertOptions(options));
Working plunker
(This is also why it's working with the area chart.. That's not a material chart).
I use code from example page to create horizontal bars chart:
Option backgroundColor work for other chart types, like this and that.
Is there are way to change background color for Bars charts?
google.load('visualization', '1.1', {packages:['bar']});
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.arrayToDataTable([
['Opening Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
backgroundColor: { fill: '#000' },//this is not working
title: 'Chess opening moves',
width: 900,
legend: { position: 'none' },
chart: { title: 'Chess opening moves',
subtitle: 'popularity by percentage' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: 'Percentage'} // Top x-axis.
}
},
bar: { groupWidth: "90%" },
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="top_x_div"></div>
chart
You're using a Material Bar chart (See the relevant documentation here.)
See the comment at the end of the documentation paragraph :
The Material Charts are in beta. The appearance and interactivity are
largely final, but the way options are declared is not. If you are
converting a Classic Bar Chart to a Material Bar Chart, you'll want to
replace this line:
chart.draw(data, options);
...with this:
chart.draw(data, google.charts.Bar.convertOptions(options));
So if you want your standard options taken into account you need to wrap them with google.charts.Bar.convertOptions().
Have a try, it works great. See a jsfiddle of it here.