Google chart, average line removes my other line - javascript

I have a Google combo chart that has one value as bars and one value for a line, I also wanted a line to show the average of the value of the bars, so I found code that would do that, however, when implemented my other line disappeared.
This is what my chart looked like prior.
And this is after I implemented the average line, my other line disappeared.
I don't know how to do to make them both show?
This line seems to have things to do with all of it, changing dv back to data will show how my chart looked like on the first picture, but I guess there is something more I need to change to make it all work?
chart.draw(dv, options);
Here is the code.
<script>
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Day', 'Repetitions', 'Sets'],
#foreach (var c in db.Query(Query, inputDate, endDate, baselift))
{
var totAvg = c.avg;
var allReps = c.reps;
var realAvg = (totAvg / allReps) * 100;
//Writes out the data that will be shown in the chart.
<text>['#c.date', #c.reps, #c.sets],</text>
}
]);
// Create a DataView that adds another column which is all the same (empty-string) to be able to aggregate on.
var viewWithKey = new google.visualization.DataView(data);
viewWithKey.setColumns([0, 1, {
type: 'string',
label: '',
calc: function (d, r) {
return ''
}
}])
// Aggregate the previous view to calculate the average. This table should be a single table that looks like:
// [['', AVERAGE]], so you can get the Average with .getValue(0,1)
var group = google.visualization.data.group(viewWithKey, [2], [{
column: 1,
id: 'avg',
label: 'Average',
aggregation: google.visualization.data.avg,
'type': 'number'
}]);
// Create a DataView where the third column is the average.
var dv = new google.visualization.DataView(data);
dv.setColumns([0, 1, {
type: 'number',
label: 'Average',
calc: function (dt, row) {
return group.getValue(0, 1);
}
}]);
var options = {
title: 'Daily Repetition Statistics',
backgroundColor: { fill: 'transparent' },
explorer: { axis: 'horizontal' },
vAxes: {
0: { logScale: false, viewWindow: { min: 0 } },
1: { logScale: false, maxValue: 2 }
},
hAxis: { title: 'Day' },
seriesType: 'bars',
curveType: 'function',
series: {
0: {
targetAxisIndex: 0,
color: 'orange'
},
1: { targetAxisIndex: 1 },
1: { targetAxisIndex: 1, type: "line" },
2: { targetAxisIndex: 1, type: "line" }
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(dv, options);
}
</script>


the column index for 'sets' is not provided to setColumns
change this...
var dv = new google.visualization.DataView(data);
dv.setColumns([0, 1, {
type: 'number',
label: 'Average',
calc: function (dt, row) {
return group.getValue(0, 1);
}
}]);
to..
var dv = new google.visualization.DataView(data);
dv.setColumns([0, 1, 2, { // <-- add 'sets' column index 2
type: 'number',
label: 'Average',
calc: function (dt, row) {
return group.getValue(0, 1);
}
}]);

Related

Google Charts: How do I add a label to grouped column chart

I have a column chart produced with the "classic" corechart package.
But, I don't understand how to put the column values as labels on top of each bar. (eg. 8.50 on the very first).
Here's my code:
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[
"",
"Hamburgers",
"Pizzas",
"Flutes",
"Wraps"
],
["29-04-2017", 8.50, 8.2, 8.4, 5.5],
["13-05-2017", 8.60, 8.32, 8.53, 5.67],
["12-06-2017", 8.30, 8.72, 8.13, 5.37],
["23-08-2017", 8.50, 8.22, 8.43, 5.57]
]);
var options = {
chart: {
title: ' ',
animation: {
duration: 2000,
easing: "out",
startup: true
}
},
legend: {position:'top'},
hAxis: { format: "date" },
vAxis: {
format: 'decimal',
viewWindow:{
max:10,
min:0
}
},
height: 400,
bars: 'vertical',
colors: ["#0F5470", "#8EA3A4", "#3EB8BC", "#98D4F2"]
};
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>

you can use the annotation column role to add labels to the bars
the annotation column should follow the series column in the data table
see following working snippet
here, a DataView is used to add annotation columns for each series...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
[
"",
"Hamburgers",
"Pizzas",
"Flutes",
"Wraps"
],
["29-04-2017", 8.50, 8.2, 8.4, 5.5],
["13-05-2017", 8.60, 8.32, 8.53, 5.67],
["12-06-2017", 8.30, 8.72, 8.13, 5.37],
["23-08-2017", 8.50, 8.22, 8.43, 5.57]
]);
// build view
var viewColumns = [0];
$.each(new Array(data.getNumberOfColumns() - 1), function (index) {
viewColumns.push(index + 1);
viewColumns.push({
calc: function (dt, row) {
return dt.getFormattedValue(row, index + 1);
},
role: 'annotation',
type: 'string'
});
});
var view = new google.visualization.DataView(data);
view.setColumns(viewColumns);
var options = {
chart: {
title: ' ',
animation: {
duration: 2000,
easing: "out",
startup: true
}
},
legend: {position:'top'},
hAxis: { format: "date" },
vAxis: {
format: 'decimal',
viewWindow:{
max:10,
min:0
}
},
height: 400,
bars: 'vertical',
colors: ["#0F5470", "#8EA3A4", "#3EB8BC", "#98D4F2"]
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(view, options);
$(window).resize(function() {
chart.draw(view, 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="chart_div"></div>
EDIT
if you know the number of columns in the data table,
then you don't need to build them dynamically
the setColumns method takes an array,
each entry in the array can be a column index --> 0
or an object, if using a calculated column...
{
calc: function (dt, row) {
return dt.getFormattedValue(row, 1);
},
role: 'annotation',
type: 'string'
}
in this case, we need to include the columns from the data table,
and a calculated column for each annotation column
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
[
"",
"Hamburgers",
"Pizzas",
"Flutes",
"Wraps"
],
["29-04-2017", 8.50, 8.2, 8.4, 5.5],
["13-05-2017", 8.60, 8.32, 8.53, 5.67],
["12-06-2017", 8.30, 8.72, 8.13, 5.37],
["23-08-2017", 8.50, 8.22, 8.43, 5.57]
]);
// build view
var view = new google.visualization.DataView(data);
view.setColumns([
0, // <-- x-axis column index
1, // <-- first y-axis column index
{ // annotation column for first y-axis column
calc: function (dt, row) {
return dt.getFormattedValue(row, 1); // get formatted value from first y-axis column
},
role: 'annotation',
type: 'string'
},
2, // <-- second y-axis column index
{ // annotation column for second y-axis column
calc: function (dt, row) {
return dt.getFormattedValue(row, 2); // get formatted value from second y-axis column
},
role: 'annotation',
type: 'string'
},
3,
{
calc: function (dt, row) {
return dt.getFormattedValue(row, 3);
},
role: 'annotation',
type: 'string'
},
4,
{
calc: function (dt, row) {
return dt.getFormattedValue(row, 4);
},
role: 'annotation',
type: 'string'
}
]);
var options = {
chart: {
title: ' ',
animation: {
duration: 2000,
easing: "out",
startup: true
}
},
legend: {position:'top'},
hAxis: { format: "date" },
vAxis: {
format: 'decimal',
viewWindow:{
max:10,
min:0
}
},
height: 400,
bars: 'vertical',
colors: ["#0F5470", "#8EA3A4", "#3EB8BC", "#98D4F2"]
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(view, options);
$(window).resize(function() {
chart.draw(view, 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="chart_div"></div>
NOTE
the reason you cannot build the columns dynamically using a regular for loop,
is because we're assigning the column index in an object
in this case, a reference is saved to i
{
calc: function (dt, row) {
return dt.getFormattedValue(row, i);
},
role: 'annotation',
type: 'string'
}
when the loop finishes and the columns are used in setColumns,
all of the columns reference i, which is the last value of the loop
to use the value of i during the loop, instead of a reference to a i
then the object being built has to be inside a closure, or function
which is why the $.each statement is used in the original answer
this creates a closure and the value of index is used,
rather than a reference to index
$.each(new Array(data.getNumberOfColumns() - 1), function (index) { // <-- this creates the closure...
viewColumns.push(index + 1);
viewColumns.push({
calc: function (dt, row) {
return dt.getFormattedValue(row, index + 1);
},
role: 'annotation',
type: 'string'
});
});

How to add a custom axis line to a google chart?

I have a google scatter chart that has some significant thresholds in it. How do I visualise them?
Do I push some extra ticks on chart axis? If so how do I add just one and how do I style it?
I am aiming for something like this.
I am using React Google charts

add another column, or series, with the same value for all rows...
this can be added using a data view with calculated columns,
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['x', 'y0'],
[0, 165],
[1, 175],
[2, 185]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: function () {
return 150;
},
label: 'min',
type: 'number'
},
{
calc: function () {
return 175;
},
label: 'avg',
type: 'number'
},
{
calc: function () {
return 200;
},
label: 'max',
type: 'number'
}
]);
var options = {
vAxis: {
viewWindow: {
min: 125,
max: 225
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
EDIT
here's another example...
add additional columns to the data table,
use getColumnRange for find the min and max x-axis values
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['x', 'y0'],
[0, 165],
[1, 175],
[2, 185]
]);
var xAxisRange = data.getColumnRange(0);
data.addColumn({label: 'min', type: 'number'});
data.addColumn({label: 'avg', type: 'number'});
data.addColumn({label: 'max', type: 'number'});
data.addRows([
[xAxisRange.min, null, 150, 175, 200],
[xAxisRange.max, null, 150, 175, 200]
]);
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, {
series: {
1: {
color: 'cyan'
},
2: {
color: 'cyan'
},
3: {
color: 'cyan'
}
}
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Google Visualization highlight single grid line

how can I highlight a single grid line? I would like to set an optical temperature limit at 35 ° C.
Thanks! I have now added it to my code, but it does not work .... do you see my mistake? Or did I not understand something in your explanation?
Here is the edited version :
//Google Chart
google.charts.load('current', {
callback: function drawChart(peanut) {
const div = document.createElement('div');
div.id = peanut.color + peanut.mac.split(':').join('');
$('#charts').appendChild(div);
peanut.data = new google.visualization.DataTable();
peanut.data.addColumn('datetime', 'Time');
peanut.data.addColumn('number', '🥜 ' + peanut.label);
for (var i = 0, len = localStorage.length; i < len; i++) {
let dateTime = new Date(parseInt(localStorage.key(i)));
let item = JSON.parse(localStorage.getItem(localStorage.key(i)));
if (item.peanutMac === peanut.mac) {
if (item.temperatureCelsius) {
let temperature = parseFloat(item.temperatureCelsius);
peanut.data.addRows([ [dateTime, temperature] ]);
} else if (item.alert) {
let data = parseInt(item.alert);
peanut.data.addRows([ [dateTime, data] ]);
}
}
}
if (peanut.type == 'thermo') {
peanut.chart = new google.visualization.LineChart($('#' + div.id));
peanut.chartOptions = {
interpolateNulls: true,
fontName: 'Roboto',
curveType: 'function',
colors: [peanut.rgbColor],
width: document.body.clientWidth,
height: (window.innerHeight - 224) / 2,
legend: 'none',
lineWidth: 3,
vAxis: {
format: '#.## °C',
ticks: [15.00, 20.00, 25.00, 30.00, 35.00, 40.00]
},
hAxis: {
gridlines: {
color: '#fff'
}
}
};
peanut.viewColumns = [];
$.each(new Array(data.getNumberOfColumns()), function (colIndex) {
peanut.viewColumns.push(colIndex);
});
peanut.viewColumns.push({
calc: function () {
return 35;
},
label: 'optical temperature limit',
type: 'number'
});
}
peanut.view = new google.visualiation.DataView(data);
peanut.view.setColumns(viewColumns);
if (peanut.data.getNumberOfRows()) {
peanut.chart.draw(peanut.view, peanut.chartOptions);
}
}
packages:['corechart', 'table']
});

add another series with the value set to 35 for all rows
here, a data view is used to add a calculated column for the optical temperature limit
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y0');
data.addColumn('number', 'y1');
data.addColumn('number', 'y2');
data.addRows([
[1, 32.8, 20.8, 21.8],
[2, 30.9, 29.5, 32.4],
[3, 25.4, 27, 25.7],
[4, 21.7, 28.8, 20.5],
[5, 21.9, 27.6, 20.4]
]);
var options = {
interpolateNulls: true,
fontName: 'Roboto',
curveType: 'function',
legend: 'none',
lineWidth: 3,
vAxis: {
format: '#.## °C',
ticks: [20.00, 25.00, 30.00, 35.00, 40.00]
},
hAxis: {
gridlines: {
color: '#fff'
}
}
};
var viewColumns = [];
$.each(new Array(data.getNumberOfColumns()), function (colIndex) {
viewColumns.push(colIndex);
});
viewColumns.push({
calc: function () {
return 35;
},
label: 'optical temperature limit',
type: 'number'
});
var view = new google.visualization.DataView(data);
view.setColumns(viewColumns);
var chart = new google.visualization.LineChart($('#chart').get(0));
chart.draw(view, options);
},
packages:['corechart', 'table']
});
<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="chart"></div>

Its not the best and safest way but I didnt find something on the google documentation:
You could use Jquery for it Ive tried it on the example from google docs and it works click
var line = $("svg g line")[4]
$(line).attr('stroke','red');

A simple way is to set the vAxis baseline to the value you want, say 35, and change the baselineColor. There is no option to change the width of this line, however, so if you need that, you should follow the suggestion above to add a series just to draw this line, and set its lineWidth.

Google Charts API: Show/Hide Series on Legend Click. How?

I found the following code online and would like to adapt it to my existing code.
Here's the code to show/hide data series on click I found:
http://jsfiddle.net/asgallant/6gz2Q/
Here's my Adaptation so far:
function drawChart() {
var data = new google.visualization.arrayToDataTable([
['Draw', '1997', '1998'],
['1', 1236777, 1408007],
['2', 834427, 572882],
['3', 2164890, 1614181],
['4', 1893574, 3897171],
['5', 2851881, 673906],
['6', 359504, 630853]
]);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
// create columns array
var columns = [];
// display these data series by default
var defaultSeries = [1];
var series = {};
for (var i = 0; i < data.getNumberOfColumns(); i++) {
if (i == 0 || defaultSeries.indexOf(i) > -1) {
// if the column is the domain column or in the default list, display the series
columns.push(i);
}
else {
// otherwise, hide it
columns[i] = {
label: data.getColumnLabel(i),
type: data.getColumnType(i),
calc: function () {
return null;
}
};
}
if (i > 0) {
// set the default series option
series[i - 1] = {};
if (defaultSeries.indexOf(i) == -1) {
// backup the default color (if set)
if (typeof(series[i - 1].color) !== 'undefined') {
series[i - 1].backupColor = series[i - 1].color;
}
series[i - 1].color = '#CCCCCC';
}
}
}
// Options customize what goes inside our chart.
var options = {
fontName: 'verdana',
fontSize: 12,
// Curve the series line.
curveType: "function",
title: 'Title of Chart',
// disables tooltip on hover data points
enableInteractivity: true,
// Enable/Disable tooltip. selection or none.
tooltip: { trigger: 'none' },
// Select multiple Data points.
selectionMode: 'multiple',
// Customize vAxis ---------------------------------------------------------
vAxis: {
gridlines: {color: 'black', count: 5},
title: 'Title of vAxis',
// Affects only the Title. eg. Not title.
titleTextStyle: {fontName: 'verdana', fontSize: 10, color: 'black', bold: false, italic: false},
// Range of data for vAxis eg. min: 0, max:9
viewWindow: {min: 0, max: 5006386},
// Affects only the Range. eg. Not title.
textStyle: {fontName: 'verdana', fontSize: 12, color: 'black', bold: false, italic: false}
},
// Customize hAxis ---------------------------------------------------------
hAxis: {
title: 'Title of hAxis',
// Affects only the Title. eg. Not title.
titleTextStyle: {fontName: 'verdana', fontSize: 10, color: 'black', bold: false, italic: false},
// Affects only the Range. eg. Not title.
textStyle: {fontName: 'verdana', fontSize: 10, color: 'black', bold: false, italic: false}
},
// Customize Series ---------------------------------------------------------
series: {
0: {lineWidth: 1, pointSize: 4},
1: {lineWidth: 1, pointSize: 4},
2: {lineWidth: 1, pointSize: 4}
},
// Customize Annotations ---------------------------------------------------------
annotations: {
textStyle: {fontName: 'verdana', fontSize: 10, color: 'black', bold: false, italic: false, auraColor: 'none'}
},
// Custome Legends ---------------------------------------------------------
legend: {
// Position top, right, bottom, left.
position: 'top',
// Align at the star, center or end.
alignment: 'start',
// Affects only the Range. eg. Not title.
textStyle: {fontName: 'verdana', fontSize: 10, color: 'black', bold: false, italic: false}
}
}; // End Options
function showHideSeries () {
var sel = chart.getSelection();
// if selection length is 0, we deselected an element
if (sel.length > 0) {
// if row is undefined, we clicked on the legend
if (sel[0].row == null) {
var col = sel[0].column;
if (columns[col] == col) {
// hide the data series
columns[col] = {
label: data.getColumnLabel(col),
type: data.getColumnType(col),
calc: function () {
return null;
}
};
// grey out the legend entry
series[col - 1].color = '#CCCCCC';
}
else {
// show the data series
columns[col] = col;
series[col - 1].color = null;
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
chart.draw(view, options);
}
}
}
google.visualization.events.addListener(chart, 'select', showHideSeries);
// create a view with the default columns
var view = new google.visualization.DataView(data);
view.setColumns(columns);
chart.draw(view, options);
}
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
...And here is what I really wanted to figure how to incorporate into this code. I can't seem to figure it out. It's driving me nuts!
// Declare our Columns and set types, roles, etc.
view.setColumns([
0,
1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" },
2, { calc: "stringify", sourceColumn: 2, type: "string", role: "annotation" },
3, { calc: "stringify", sourceColumn: 3, type: "string", role: "annotation" }
]);

Try replacing this section:
if (i == 0 || defaultSeries.indexOf(i) > -1) {
// if the column is the domain column or in the default list, display the series
columns.push(i);
}
with this:
if (i == 0 || defaultSeries.indexOf(i) > -1) {
// if the column is the domain column or in the default list, display the series
columns.push(i);
if (i > 0) {
columns.push({
calc: "stringify",
sourceColumn: i,
type: "string",
role: "annotation"
});
}
}

Here is asgallant solution which worked as desired.
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y1');
data.addColumn('number', 'y2');
data.addColumn('number', 'y3');
// add random data
var y1 = 50, y2 = 50, y3 = 50;
for (var i = 0; i < 100; i++) {
y1 += Math.floor(Math.random() * 5) * Math.pow(-1, Math.floor(Math.random() * 2));
y2 += Math.floor(Math.random() * 5) * Math.pow(-1, Math.floor(Math.random() * 2));
y3 += Math.floor(Math.random() * 5) * Math.pow(-1, Math.floor(Math.random() * 2));
data.addRow([i, y1, y2, y3]);
}
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
// create columns array
var columns = [];
// display these data series by default
var defaultSeries = [1, 3];
var series = {};
for (var i = 0; i < data.getNumberOfColumns(); i++) {
if (i == 0 || defaultSeries.indexOf(i) > -1) {
// if the column is the domain column or in the default list, display the series
columns.push(i);
}
else {
// otherwise, hide it
columns.push({
label: data.getColumnLabel(i),
type: data.getColumnType(i),
sourceColumn: i,
calc: function () {
return null;
}
});
}
if (i > 0) {
columns.push({
calc: 'stringify',
sourceColumn: i,
type: 'string',
role: 'annotation'
});
// set the default series option
series[i - 1] = {};
if (defaultSeries.indexOf(i) == -1) {
// backup the default color (if set)
if (typeof(series[i - 1].color) !== 'undefined') {
series[i - 1].backupColor = series[i - 1].color;
}
series[i - 1].color = '#CCCCCC';
}
}
}
var options = {
width: 600,
height: 400,
series: series
}
function showHideSeries () {
var sel = chart.getSelection();
// if selection length is 0, we deselected an element
if (sel.length > 0) {
// if row is undefined, we clicked on the legend
if (sel[0].row == null) {
var col = sel[0].column;
if (typeof(columns[col]) == 'number') {
var src = columns[col];
// hide the data series
columns[col] = {
label: data.getColumnLabel(src),
type: data.getColumnType(src),
sourceColumn: src,
calc: function () {
return null;
}
};
// grey out the legend entry
series[src - 1].color = '#CCCCCC';
}
else {
var src = columns[col].sourceColumn;
// show the data series
columns[col] = src;
series[src - 1].color = null;
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
chart.draw(view, options);
}
}
}
google.visualization.events.addListener(chart, 'select', showHideSeries);
// create a view with the default columns
var view = new google.visualization.DataView(data);
view.setColumns(columns);
chart.draw(view, options);
}
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);

Bar overlapping issue in google chart - Combo chart

I am having a little problem with google chart implementation. As per requirement, I should have dual y-axis and the bars for y-axis should be overlapping. I achieved following output with my code:
Notice the two blue arrows for last two bars. The blue bar is hidden behind red bar as its smaller. It should actually look something like this:
This is my code for js file:
var chart, data;
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart()
{
// Create the data table.
data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addColumn('number', 'pieces');
data.addColumn('number', 'ratio');
data.addColumn('number', 'ratio2');
data.addRows([
['Mushrooms', 300, 200, 50, 1],
['Onions', 100, 244, 4, 3],
['Olives', 100, 400, 56, 10]
]);
// Set chart options
options = {
chartType:"ComboChart",
containerId:"visualization",
stackSeries: true,
isStacked : true,
seriesDefaults: {
rendererOptions: {
barPadding: 0,
barMargin: 10
},
pointLabels: {
show: true,
stackedValue: true
}
},
grid: {
background: '#272424',
drawGridlines: false
},
seriesType: "bars",
series: {
0: {
targetAxisIndex: 0
},
1: {
targetAxisIndex: 1
},
2: {
targetAxisIndex: 1,
type: "line"
},
3: {
type: "line"
}
},
hAxis:{
},
vAxes: {
0: {
title: "Slices",
label:'Slices',
type:'bars'
},
1: {
title: "pieces",
label:'pieces',
type:'bars'
},
2: {
title: "ratio,",
label:'ratio',
type:'line'
},
3: {
title: "ratio2,",
label:'ratio2',
type:'line'
}
}
};
// Instantiate and draw our chart, passing in some options.
chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
google.visualization.events.addListener(chart, 'select', selectionHandler);
}
function selectionHandler() {
var selectedData = chart.getSelection(), row, item;
if(selectedData != '')
{
row = selectedData[0].row;
item = data.getValue(row,3);
alert("You selected :" + item);
}
}
Can anyone suggest me how could I go about this? Any help would be appreciated.

You are displaying your bars on separate axes:
0: {
targetAxisIndex: 0
},
1: {
targetAxisIndex: 1
},
2: {
targetAxisIndex: 1,
type: "line"
},
3: {
type: "line"
}
So the first bar is on the left axis, the second is on the right axis. The first bar only shows because it is taller than the red bar in front of it. This is by design. If you want them to display stacked, change your code to this:
0: {
targetAxisIndex: 0
},
1: {
targetAxisIndex: 0
},
2: {
targetAxisIndex: 1,
type: "line"
},
3: {
targetAxisIndex: 1,
type: "line"
}
This will end up with this:
Note that your two axes no longer have equivalent size. Adjust other parameters as needed. If you want them side by side, you can put them on the same axis and remove isStacked: true which will make them stand next to each other.
Note: This sort of chart is incredibly busy and is likely not good visualization practice. Regardless, if you need to create a chart, the above solution should work. If you actually mean that you want the smaller bar in front, then good luck with SVG editing.

There actually is a way to get what you want, using a DataView to split your blue data series into two. Make one series where the data is greater than red series, and one where it is less than or equal to the red series, and position them (in order) greater than, red, less than. In the series option, set this new series to be the same color as the first, and hide it from the index.
Here's the DataView you would use:
var view = new google.visualization.DataView(data);
view.setColumns([0, {
type: 'number',
label: data.getColumnLabel(1),
calc: function (dt, row) {
var val = dt.getValue(row, 1);
return (val > dt.getValue(row, 2)) ? val : null;
}
}, 2, {
type: 'number',
label: data.getColumnLabel(1),
calc: function (dt, row) {
var val = dt.getValue(row, 1);
return (val <= dt.getValue(row, 2)) ? val : null;
}
}, 3, 4]);
and here's the series option:
series: {
0: {
targetAxisIndex: 0
},
1: {
targetAxisIndex: 1
},
2: {
targetAxisIndex: 0,
visibleInLegend: false,
color: '#3366cc' // matches series 0
},
3: {
targetAxisIndex: 1,
type: "line"
},
4: {
type: "line"
}
}
Draw the chart with the view instead of the DataTable:
chart.draw(view, options);
See it working here: http://jsfiddle.net/asgallant/4jhC5/

Categories