I'm using a standard bar chart based on Google's code description
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal' // Required for Material Bar Charts.
};
The problem is that I have more data, like the variation in Sales in 2014, that I would like to get included in the chart = maybe as whisker lines or an additional number that overlay when you mouseover a bar. Is this even possible? If so, how is it done?
It turns out you can do this (it's a bit more complicated with html because you have to find the classic graph options)
add specific tooltip to arraytoDataTable
Related
I am trying to use Google gauge charts in my page. Now I want to add text in the chart for each section or colors. Can I do that inside the chart. I tried doing some html modification but with no help.
Trying from this link -https://developers.google.com/chart/interactive/docs/gallery/gauge
So for example, I would like to add text1 for white color and so on.
use the majorTicks config option to provide labels for the major ticks
see following working snippet...
google.charts.load('current', {
callback: function () {
var container = document.getElementById('chart_div');
var chart = new google.visualization.Gauge(container);
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
['Network', 68]
]);
var options = {
width: 600, height: 200,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
majorTicks: ['A', 'B', 'C', 'D', 'E'],
minorTicks: 3
};
chart.draw(data, options);
},
packages: ['gauge']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I'm trying to add tooltips to a Google Area Chart, but I'm getting unexpected behavior. I took the Area Chart JSFiddle example and modified it to add a custom tooltip as described here. My content looks like this:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', { type: 'string', role: 'tooltip'}],
['2013', 1000, 400, 'wtf'],
['2014', 1170, 460, 'hithere'],
['2015', 660, 1120, 'doh'],
['2016', 1030, 540, 'moohaha']
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0},
focusTarget: 'category'
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
JSFiddle here: https://jsfiddle.net/accelerate/y18tb8eq/
Rather than replacing the entire tooltip content, like I expected, the 'expenses' line in the tooltip gets replaced with my tooltip data. For example, the tooltip for the first set of data looks like:
2013
Sales: 1,000
Expenses: wtf
Can someone explain to me what I'm doing wrong?
I figured it out. Which column the tooltip is in matters. I needed to put the tooltip column immediately after the first column. So my header column has to look like this:
['Year', { type: 'string', role: 'tooltip'}, 'Sales', 'Expenses']
See this image I am showing some data I have to compare each bar with data shown by line graph:
Is this possible in Google combo chart?
sure it's possible, see following example...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 614.6],
['2005/06', 135, 1120, 599, 1268, 288, 682],
['2006/07', 157, 1167, 587, 807, 397, 623],
['2007/08', 139, 1110, 615, 968, 215, 609.4],
['2008/09', 136, 691, 629, 1026, 366, 569.6]
]);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, {
title : 'Monthly Coffee Production by Country',
vAxis: {title: 'Cups'},
hAxis: {title: 'Month'},
height: 420,
orientation: 'vertical',
seriesType: 'bars',
series: {
5: {
pointSize: 5,
type: 'line'
}
}
});
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Google Charts API provides a javascript wrapper that allows you to customize your combo chart . It has lot of configuration options , you can check them here Google Combo Chart Config options . You can use annotations options to build the lines across your bars .For full combo chart documentation vist here https://developers.google.com/chart/interactive/docs/gallery/combochart
I saw some previous questions/answers here on StackOverflow
but none of the code provided in those answers seemed to work
with my chart:
Here is my code:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month', 'Sales', 'Expenses'],
['January', 200, 150],
['February', 1170, 460],
['March', 660, 1120],
['April', 1030, 540],
['May', 1030, 540],
['June', 1030, 540]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: May-August',
backgroundColor: '#fcfcfc',
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
The html div code:
<div id="columnchart_material" style="width: 650px; height: 500px;"></div>
The thing is I want to change the background from white to light gray
and I can't seem to make it work by declaring backgroundColor: "#fcfcfc'
inside options{}
Is there any other way to declare a background color on that chart
I'm thinking maybe the type of chart I'm using can't change it's
background color.
I also tried to specify the backgroundColor variable as a function (followed by curly brackets backgroundColor{ color: '#fcfcfc' }
but that didn't work on my chart either.
Any help would be higly appreciated.
Thank you
jsFiddle : http://jsfiddle.net/mtypsnqy/
First, you've placed your backgroundColor: '#fcfcfc', at the wrong place. You have defined it inside of chart:{}while you should do it either outside any object or inside of chartArea like:
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: May-August'
},
backgroundColor: '#fcfcfc'
};
which will cause your whole div containing the chart to be dark grey or like this:
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: May-August'
},
chartArea:{
backgroundColor: '#fcfcfc'
}
};
which will cause only the area contained within your two axes to be colored red.
And finally you have to change your
chart.draw(data, options);
to
chart.draw(data, google.charts.Bar.convertOptions(options));
as specified on the Bar Charts API page.
I made you a fiddle to play around in and see the difference: Link
I need to place a background image in a Google Chart. I've seen solutions which suggest including the chart in a parent div and setting a background image for the parent div. However, if I do that then the background image will also cover the area outside the chart where the axis labels and legend, etc are displayed. I want my image in the chart area itself only.
Alternatively, is there any way to retrieve the chart options so that I could use chartArea.top, chartArea.left, chartArea.width and chartArea.height to overlay an image on the chart in the correct place?
Many thanks, Chris
You can get information about where your chart is drawn in the following manner:
var graph = new google.visualization.LineChart(...);
graph.draw(data, ...);
var boundingBox = graph.getChartLayoutInterface().getChartAreaBoundingBox();
var pixelsFromLeft = boundingBox.left;
You can then use this information to draw a div on the correct position.
Just to contribute to Sjoerd's answer, the full code can look like this:
In Html, as jaime suggested in this stack overflow question:
<div id='brand_div'>
<div id='chart_div'></div>
</div>
In css, as suggested in the same answer:
#brand_div{
background: url(<SOME-URL>) no-repeat;
}
In javascript, using Sjoerd's suggestion:
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'X', 'Y', 'Temperature'],
['', 80, 167, 120],
['', 79, 136, 130],
['', 78, 184, 50],
['', 72, 278, 230],
['', 81, 200, 210],
['', 72, 170, 100],
['', 68, 477, 80]
]);
var options = {
colorAxis: {colors: ['yellow', 'red']},
width: 450,
height: 300,
title: 'My Daily Activities',
backgroundColor: 'none' // this is important!
};
var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
chart.draw(data, options);
// this two lines are the ones that do the magic
var boundingBox = chart.getChartLayoutInterface().getChartAreaBoundingBox();
$('#brand_div').css('background-position', boundingBox.left + "px " + boundingBox.top + "px").css('background-size', boundingBox.width + "px " + boundingBox.height + "px");
}
All this code was also written using the example in google chart's documentation and my answer to this stack overflow question