I am using Google Chart API to create chart for values which goes from 1 to millions.
Problem
The bars which are representing smaller values (ex: less than 50 or so) are invisible on graph and no way I can see what values correspond to certain x-axis.
This would be solved if I can somehow print y-axis values on top of bars.But, I couldn't find any mention in the API doc on how to do it.
There is similar problem here, but it doesn't answers my question.
put labels on top of inside bar in google interactive bar chart
There are some other more than year old unanswered questions here, I am hoping someone might have found a solution or a workaround by now, that is why asking this question again.
Google Visualization: Column Chart, simple question but can't find the answer
How to show values on the the top of columns Google Chart API
Can you show me how to achieve what I want using How can I customize this Google Bar Chart? ?
Check out Andrew Gallant's JSFiddle here:
http://jsfiddle.net/asgallant/QjQNX/
It uses a clever hack of a combo chart to accomplish what I think you're looking for.
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'annotation'});
data.addRows([
['Foo', 53, 'Foo text'],
['Bar', 71, 'Bar text'],
['Baz', 36, 'Baz text'],
['Cad', 42, 'Cad text'],
['Qud', 87, 'Qud text'],
['Pif', 64, 'Pif text']
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 1, 2]);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(view, {
height: 400,
width: 600,
series: {
0: {
type: 'bars'
},
1: {
type: 'line',
color: 'grey',
lineWidth: 0,
pointSize: 0,
visibleInLegend: false
}
},
vAxis: {
maxValue: 100
}
});
}
I had some setbacks using annotation and the invisible line (for example, having it displayed in the tooltip as another series).
I've made a hack to the ComboChart (could work with BarChart and ColumnChart as well, with a couple of changes) to insert the labels into the SVG.
Check out this fiddle: http://jsfiddle.net/augustomen/FE2nh/
Tested on Firefox 21, Chrome 27 and IE 9.
Related
I'm having problems formatting the axes of material charts.
Using "classic" line chart if I would like to format my vertical axis with a dollar sign, I would do
{vAxes: { 0: {title: 'Amount',format: '$#,##'}}}
Making it look like so:
I would've thought I could change to {axes: {y: {Amount: {format:'$#,##', label:'Amount'} } } } after reading what little docs exist for the material charts, but this didn't work at all.
Also, I have date on the horizontal axis, and the default formatting is sh*t! I can't figure out how to override that formatting either. Note this is on the axis it self I'm trying to format.
With the horizontal I tried setting hAxis: {format:'YYYY-MM-DD'} but that didn't work.
My main question would be: Does anyone know of a complete documentation of the material charts? The one I've been using is this.
Second question: How do I format the values on the axes?
the options simply are not available on Material charts...
see --> Tracking Issue for Material Chart Feature Parity #2143
when using a Core chart instead, there is an option that will get the chart "close" to Material chart...
theme: 'material'
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date','Date');
data.addColumn('number','Value');
data.addRows([
[new Date(2017, 1, 12), 250],
[new Date(2017, 1, 13), 200],
[new Date(2017, 1, 14), 150]
]);
var options = {
hAxis: {
format: 'yyyy-MM-dd'
},
theme: 'material',
vAxis: {
format: '$#,##',
title: 'Amount'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I'm having problems formatting the axes of material charts.
Using "classic" line chart if I would like to format my vertical axis with a dollar sign, I would do
{vAxes: { 0: {title: 'Amount',format: '$#,##'}}}
Making it look like so:
I would've thought I could change to {axes: {y: {Amount: {format:'$#,##', label:'Amount'} } } } after reading what little docs exist for the material charts, but this didn't work at all.
Also, I have date on the horizontal axis, and the default formatting is sh*t! I can't figure out how to override that formatting either. Note this is on the axis it self I'm trying to format.
With the horizontal I tried setting hAxis: {format:'YYYY-MM-DD'} but that didn't work.
My main question would be: Does anyone know of a complete documentation of the material charts? The one I've been using is this.
Second question: How do I format the values on the axes?
the options simply are not available on Material charts...
see --> Tracking Issue for Material Chart Feature Parity #2143
when using a Core chart instead, there is an option that will get the chart "close" to Material chart...
theme: 'material'
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date','Date');
data.addColumn('number','Value');
data.addRows([
[new Date(2017, 1, 12), 250],
[new Date(2017, 1, 13), 200],
[new Date(2017, 1, 14), 150]
]);
var options = {
hAxis: {
format: 'yyyy-MM-dd'
},
theme: 'material',
vAxis: {
format: '$#,##',
title: 'Amount'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Imagine I am drawing a line chart that includes both known (certain) values and estimated (uncertain) values. These values are all in the same series (not two different lines). This chart of projected population growth rate is a good example:
Notice how after the year 2012 or so, the line turns blue.
I have read the Customizing Lines page but it appears to change the style for the entire line, not just a segment of it.
My question is this: is it possible change the style and/or color of part of a line within the same series?
Solutions, in order of desirability:
Indicate in the value itself whether or not it is an exact or an estimated value, and to change the styling for that line segment accordingly (e.g. [(45, "exact"), (50, "exact"), (75, "estimated')] although more likely "exact" and "estimated" would be replaced with 1 and 0 respectively).
Data and styling instructions are sent to the API separately, but for the same series.
Least desired solution is one where I actually create two different series, because that will mean creating (and keeping track of) two series for each row of data, and generating the code that splits them up into the series, as well as making sure no points are displayed where there should not be data for that series.
Although I would prefer Google Visualization for its (relative) simplicity, I have some experience with D3.js and would be willing to use it instead if it is not possible to use Google Visualization.
Actually there are two solutions I was able to find:
Using DataTables and the "Certainty" role
Using DataTables with roles allows you to use data values as chart modifiers rather than actual chart data points. In this case specifically the role to use is "certainty". You supply it as an additional column after the data, and indicate that that column is a certainty role, like so:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Value');
data.addColumn({type:'boolean',role:'certainty'}); // certainty col.
data.addRows([
['2014-12-01',100, true],
['2015-01-01',200, true],
['2015-02-01',300, true],
['2015-03-01',400, true],
['2015-04-01',500, false]
]);
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Value');
data.addColumn({type:'boolean',role:'certainty'}); // certainty col.
data.addRows([
['2014-12-01',100, true],
['2015-01-01',200, true],
['2015-02-01',300, true],
['2015-03-01',400, true],
['2015-04-01',500, false]
]);
var options = {
legend: 'none',
hAxis: { minValue: 0, maxValue: 9 },
curveType: 'function',
pointSize: 7
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
Note that you cannot control the rendering of an "uncertain" section of the line graph — Google decides this for you. If you want more control — for example, if you want it to change color as well or instead of becoming dashed, you can use styling as described below.
Styling the line of a point
Also, although not at all explicit in the Customizing Points page, you can specify styling for the line for a point as well as the point itself. If you want more customization over the styling of a segment (say its thickness or its color) you can use this option:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Value');
data.addColumn({type:'string',role:'style'}); // style col.
data.addRows([
['2014-12-01',100, null],
['2015-01-01',200, null],
['2015-02-01',300, null],
['2015-03-01',400, null],
['2015-04-01',500, 'line { stroke-color: purple }']
]);
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Value');
data.addColumn({type:'string',role:'style'}); // style col.
data.addRows([
['2014-12-01',100, null],
['2015-01-01',200, null],
['2015-02-01',300, null],
['2015-03-01',400, null],
['2015-04-01',500, 'line { stroke-color: purple }']
]);
var options = {
legend: 'none',
hAxis: { minValue: 0, maxValue: 9 },
curveType: 'function',
pointSize: 7
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
As far as I can tell you can change the color only; you can't adjust the width or the type of dashed line.
I'm using a ColumnChart to represent the elevation in a map, as suggested by Google.
However, the columns are separated by spaces, and that renders ugly white spaces between the
columns, like in Google's own example:
https://developers.google.com/maps/documentation/javascript/examples/elevation-paths
Is there a way to tell the column chart to make columns that fill up the whole space? I would like something like this:
http://4.bp.blogspot.com/-4I8oi3WqY5o/UIZnzbXql_I/AAAAAAAAAcE/GO4wl6I2-lM/s1600/Charts.png
I suspect that the only way is with lots of points.
My code:
var option = {
legend: 'none',
backgroundColor: 'transparent',
colors: ["#C9CFF5"],
titleColor: '#C9CFF5',
focusBorderColor: '#00AA00',
titleY: 'Elevation (m)',
bar: { groupWidth: '100%' }
}
// Build data
var data = new google.visualization.DataTable();
data.addColumn('string', 'Sample');
data.addColumn('number', 'Elevation (m):');
for (var i = 0; i < trackmarks.length; i++) {
data.addRow(['', trackaltis[i]]);
}
// Draw the chart using the data within its DIV.
chart = new google.visualization.ColumnChart(document.getElementById('elevation_chart'));
chart.draw(data, option);
My code is pretty standard: same as Google's, same result.
Thanks!
You can specify option:
bar: {groupWidth: "100%"}
bar.groupWidth: Percentage of the available width for each group (e.g. '20%'), where '100%' means that groups have no space between them
Update: That example uses old version of column charts which loads package columnchart
google.load("visualization", "1", {packages:["columnchart"]});
The latest code for column chart is loaded using corechart:
google.load('visualization', '1', {packages: ['corechart']});
Change that and example should work as expected without spaces.
I'm new to google charts and can't seem to figure out how i would do something of the following:
I want to make a data table that has my xcord,ycord,legendlabel. I'm trying the following:
var data = google.visualization.arrayToDataTable([]);
data.addColumn("number","reps");
data.addColumn("number","weight");
data.addColumn("string","legendlabel")
data.addColumn("string","workoutname");
data.addRows([[150, 10,"workoutA"],
[300, 2,"workoutB"], //format [xcord,ycord,legendlabel]
]);
However, it isn't working obviously because we have two different types, number and string.
Is there a way i can specify the xcord, ycord then have a label for this point, then if there are multiple labels that are the same it forms a line graph?
Thanks in advance guys!
With a line chart each data line has to have a value for every point on the domain or else the line will be broken, What you want is a scatter chart
Then data for you graph should look something like this:
var data = google.visualization.arrayToDataTable([]);
data.addColumn("number","reps");
data.addColumn("number","workout1");
data.addColumn("number","workout2");
data.addRows([
[150, 10, null],
[300, null, 2,]
]);
you will want to set the lineWidth to see the trending curve
chart.draw(data, {
lineWidth: 2,
vAxis: {title: "reps"},
hAxis: {title: "weight"}
}