var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Male', 51],
['Female', 49],
]);
// Set options for Sarah's pie chart.
var options = {title:"",
width:600,
height:400,
is3D: true};
Above is my code. I'm looking to remove the value on the hover but keep the percentages in the pie chart. So on my chart it says Male: 51(51%) Female: 49(49%). It won't let me attach a picture since I'm fairly new so I apologize for that as well.
Just add one more configuration tooltip in options object:
var options = {
title:"",
width:600,
height:400,
tooltip: {
text: 'percentage'
},
is3D: true
};
Here is demo : https://jsfiddle.net/fs6tc5nq/1/
Related
I can not generate different colors in google charts bars. The data is coming from a variable data.addRows([[${golLog}]]); and I realized that inside this variable has an array. It looks like he throws only the first color for the two bars.
Here is code for understanding:
google.charts.load('current', {
'packages' : [ 'corechart','bar' ]
});
google.charts.setOnLoadCallback(golLog);
function golLog() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Qtd');
data.addColumn('number');
data.addRows([[${golLog}]]);
var options = {
chart: {
left:0,
top:40,
width:'100%',
height:'100%'
},
title: 'GOL',
legend: { position: 'none' },
theme: 'material',
fontSize: 20,
colors:['#fc1700','#212e84']
};
var chart = new
google.charts.Bar(document.getElementById('chart_golLog'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<div id="chart_golLog"></div>
Image
Dados que estão na variável
Full code
You can use jsfiddle too testing.
google.load('visualization', '1.1', {
'packages': ['bar']
});
google.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Nescafe Instant');
data.addColumn('number', 'Folgers Instant');
data.addColumn('number', 'Nescafe Beans');
data.addColumn('number', 'Folgers Beans');
data.addRows([
['2001', 500, 1200, 816, 200],
['2002', 163, 231, 539, 594],
['2003', 125, 819, 200, 578],
['2004', 197, 536, 613, 500]
]);
// Set chart options
var options = {
isStacked: true,
width: 800,
height: 600,
chart: {
title: 'Year-by-year coffee consumption',
subtitle: 'This data is not real'
},
series: {
2: {
targetAxisIndex: 1
},
3: {
targetAxisIndex: 1
}
}
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
};
The Output
The Question
I use Google Visualization to generate above chart.
If you see the above screenshot you can see that Y- axis of above chart has two values in left side and right side. Seems like it happens because graphs use two date range for left side and right side bar.
I wanted to remove right side Y axis or print the same values for both right and left Y axis. I mean all data should be under the Y - axis which is on left side. What can I do to do it?
the options for series.n.targetAxisIndex create the second axis
removing these options will allow all series to default to the first axis
however, in Material bar charts, moving a series to a different axis,
separates the series into multiple stacks, resulting in blue and red bars
removing the options mentioned above will combine all series into one blue stack
in order to keep the stacks separated in two colors,
series.n.targetAxisIndex must be used and dual axis' will be displayed
to keep the two axis' in sync, use option --> vAxis.viewWindow
this will set an identical range for both axis'
vAxis: {
viewWindow: {
min: 0,
max: 1800
}
}
see following working snippet...
google.charts.load('current', {
packages: ['bar']
}).then(drawStuff);
function drawStuff() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Nescafe Instant');
data.addColumn('number', 'Folgers Instant');
data.addColumn('number', 'Nescafe Beans');
data.addColumn('number', 'Folgers Beans');
data.addRows([
['2001', 500, 1200, 816, 200],
['2002', 163, 231, 539, 594],
['2003', 125, 819, 200, 578],
['2004', 197, 536, 613, 500]
]);
var options = {
isStacked: true,
width: 800,
height: 600,
chart: {
title: 'Year-by-year coffee consumption',
subtitle: 'This data is not real'
},
series: {
2: {
targetAxisIndex: 1
},
3: {
targetAxisIndex: 1
}
},
vAxis: {
viewWindow: {
min: 0,
max: 1800
}
}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
note: jsapi should no longer be used to load the charts library,
according to the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. The last update, for security purposes, was with a pre-release of v45. Please use the new gstatic loader.js from now on.
this will only change the load statement, see above snippet...
I am using the google charts api to display data from php. I am displaying this information in a material style bar chart (vertical).
I am trying to add annotations to show the values inside the bars however it isn't working.
JavaScript:
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawLastPackets);
function drawLastPackets() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Days');
data.addColumn('number', 'Packets Packed');
data.addColumn({type: 'string', role: 'annotation'});
data.addRows(<?php echo json_encode($chartLastPackets); ?>);
var toAdd = ["Day", "Packets Packed", {"role": "annotation"}];
var options = {
legend: {
position: 'none',
},
series: {
0: {color: '#d7a8a8'}
},
vAxis: {
title: 'Packets'
}
};
var chart = new google.charts.Bar(document.getElementById('lastPackets'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
The contents of the php array $chartLastPackets is:
[["Mon", 1, "1"], ["Tue", 3, "3"], ["Wed", 5, "5"], ["Thu", 2, "2"], ["Fri", 0, "0"]]
However all I can see is the chart itself without the annotation.
annotations.* are listed among the several options that don't work on Material charts
you can use the following option, to get the chart close to the look & feel of Material
theme: 'material'
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Days');
data.addColumn('number', 'Packets Packed');
data.addColumn({type: 'string', role: 'annotation'});
data.addRows([["Mon", 1, "1"], ["Tue", 3, "3"], ["Wed", 5, "5"], ["Thu", 2, "2"], ["Fri", 0, "0"]]);
var options = {
legend: {
position: 'none',
},
series: {
0: {color: '#d7a8a8'}
},
theme: 'material',
vAxis: {
title: 'Packets'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('lastPackets'));
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="lastPackets"></div>
I am trying to draw a baseline on a chart that uses date values to chart. Here is the code, and here is what the chart looks like:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Assignment');
data.addColumn('date', 'Dummy');
data.addRows([
['A', new Date(2011,1,1)],
['B', new Date(2012,1,1)],
['C', new Date(2013,1,1)],
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{
width:600, height:400,
hAxis: {baseline: new Date(2012,6,1), baselineColor: 'red'}
}
);
}
This is not the expected behavior -- the baseline is set to be on July 1st, 2012, yet it is appearing all the way to the left (January 1st, 2011).
If you do this with a non-date Axis chart, the behavior is different:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Assignment');
data.addColumn('number', 'Dummy');
data.addRows([
['A', 1],
['B', 2],
['C', 3],
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{
width:600, height:400,
hAxis: {baseline: 1.5, baselineColor: 'red'}
}
);
}
What the heck is going on here? Is it impossible to set the baseline of a date-axis chart?
I'm trying to build a Google Chart to show some uptime and downtime percentages, stacked. This works great except for one small thing - I'd like the baseline of the chart to be at 99.8, and the maximum to be 100 - since downtimes are usually less than .2, this will make the chart readable.
This seemed simple enough to me. I figured this would work:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Uptime');
data.addColumn('number', 'Downtime');
data.addRows([
['Dec 1, 1830', 99.875, 0.125],
['Dec 8, 1830', 99.675, 0.325],
['Dec 15, 1830', 99.975, 0.025],
['Dec 22, 1830', 100.0, 0.0]
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, isStacked: true, vAxis: { title: "Percentage Uptime", minValue: 99.8, maxValue: 100}});
Unfortunately, the chart utterly disregards the minValue on the vAxis. This seems to be expected behaviour, according to the API, but this leaves the question - how would I accomplish this? I even went so far as to transform the data - ie, to subtract 99.8 from all the uptime values, and just have the chart go from 0 to .2, and this spits out a graph that looks okay, but I can't apply labels to the vertical axis that would say 99.8, 99.85, 99.9, whatever - the axis says, quite dutifully, 0 at the bottom, and .2 at the top, and there seems to be no way to fix it this directions, either. Either solution would be acceptable, I'm sure there's SOME way to make this work?
you need to set viewWindow like this:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Uptime');
data.addColumn('number', 'Downtime');
data.addRows([
['Dec 1, 1830', 99.875, 0.125],
['Dec 8, 1830', 99.675, 0.325],
['Dec 15, 1830', 99.975, 0.025],
['Dec 22, 1830', 100.0, 0.0]
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data,
{width: 400,
height: 240,
isStacked: true,
vAxis: {
title: "Percentage Uptime",
viewWindowMode:'explicit',
viewWindow:{
max:100,
min:99.8
}
}
}
);
//edited for newer version of api
I had a similar problem and had to specify the property as "min" not "minValue"
vAxis: {
viewWindowMode:'explicit',
viewWindow: {
max:100,
min:99.8
}
}