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
Related
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
I am playing around with Google Chart to look a certain way. In this situation I have a combo chart a line and column chart.
I have stumble upon a view "layout" problems
How do replace the show2r legend with just some custom text? At
the moment says: y = 2.032E-4 * x - 8.203 r^2 = 7.005E-3 and I want
to replace it with "Trendline (Lineair)
2/ Also the legend gets a
1/2 and Arrows left and right. I like the legend to always be
visible?
3/ The x axis doesn't display all dates, how can I set that
as a default?
4/ How do I add vertical line in say month June??
Regards
to change the trendline label in the legend, use option --> labelInLegend
there are no standard options to change the value in the tooltip,
but it can be changed manually using event --> onmouseover
when the legend's position is top,
you can use option --> legend.maxLines
to increase the number of lines available and prevent the arrows...
to ensure all dates are shown on the x-axis,
allow enough room by using option --> chartArea.bottom
see following working snippet for examples of each...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y0', 'y1'],
[new Date(2017, 11, 28), 175, 10],
[new Date(2017, 11, 29), 159, 20],
[new Date(2017, 11, 30), 126, 35],
[new Date(2017, 11, 31), 129, 40],
[new Date(2018, 0, 1), 108, 60],
[new Date(2018, 0, 2), 92, 70]
]);
var options = {
chartArea: {
bottom: 72
},
hAxis: {
slantedText: true
},
height: 400,
legend: {
maxLines: 2,
position: 'top'
},
tooltip: {
isHtml: true
},
trendlines: {
0: {
labelInLegend: '0-Linear Trend',
showR2: true,
type: 'linear',
visibleInLegend: true
},
1: {
labelInLegend: '1-Linear Trend',
showR2: true,
type: 'linear',
visibleInLegend: true
}
},
width: 400
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
google.visualization.events.addListener(chart, 'onmouseover', function (props) {
var tooltipLabels = container.getElementsByTagName('span');
for (var i = 0; i < tooltipLabels.length; i++) {
if (tooltipLabels[i].innerHTML.indexOf('y =') > -1) {
tooltipLabels[i].innerHTML = 'CUSTOM TEXT:';
}
}
});
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I have a set of
var data = new google.visualization.arrayToDataTable([
['Month', 'Rate', 'Interest', 'Principle', 'Balance','New Balance'],
['Jan', 321, 600, 816, 319, 890],
['Feb', 163, 231, 539, 594, 678],
]);
I want to Stack and Group the above data 2 at a time (Rate,Interest), (Principle, Balance) and last one New Balance as a separate Bar. How can this be achieved in Google charts.
I am new to this whole thing..any help appreciated here is some on info to get grouping data into 2 bars how can this be improved to fit my requirement.
How to make a grouped bar stack with Google charts?
using the option isStacked, if set to true, stacks the elements for all series at each domain value.
this means the values for all columns for each row will be displayed in one stack
as such, to create separate stacks, the data will need to be separated into rows
something like the following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month\nCategory', 'Bottom', 'Top'],
['Rate / Interest', 321, 600],
['Principle / Balance\nJan', 816, 319],
['New Balance', 890, null],
['Rate / Interest', 163, 231],
['Principle / Balance\nFeb', 539, 594],
['nNew Balance', 678, null],
]);
var options = {
height: 400,
isStacked: true,
legend: 'none',
width: 800
};
var chartDiv = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(chartDiv);
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Year', 'Asia', 'Europe'],
['2012', 900, 390],
['2013', 1000, 400],
['2014', 1170, 440],
['2015', 1250, 480],
['2016', 1530, 540]
]);
var options = {title: 'Population (in millions)', isStacked:true};
// Instantiate and draw the chart.
var chart = new google.visualization.BarChart(document.getElementById('container'));
chart.draw(data, options);
}`enter code here`
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
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 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