I have created a scatter chart using the Google Graphs API and all is fine apart from the fact that it will only so scatter points as decimal places if they're less than 10.
Here's the jsFiddle
google.load('visualization', '1.1', {packages: ['scatter']});
google.setOnLoadCallback(drawChart);
function drawChart () {
var data = google.visualization.arrayToDataTable([
["Period", "C Spencer Ltd"],
["1", -11.4],["2", 36.7],
["3", null],
["4", null],
["5", null]
]);
var options = {
chart: {
title: 'Scoring Trends',
subtitle: '*All LAG scores validated from Period 4'
},
width: 900,
height: 500
};
var chart = new google.charts.Scatter(document.getElementById('full_stacked_div'));
chart.draw(data, options);
}
I've tried using the NumberFormatter and the vAxis.format shown here all with no joy.
You should use google.charts.Scatter.convertOptions(options) in your draw (chart.draw(data, google.charts.Scatter.convertOptions(options));) when working with material charts, otherwise options like format won't work.
See the bottom part of Material Chart section.
Working fiddle with the option vAxis:{format:'decimal'} to accomplish what you're requesting.
EDIT:
Just want to note that this is a very common mistake and maybe someone should try to push google the emphasize the importance of this.
Related
I am creating a column chart with Google Charts API->http://plnkr.co/edit/GTg6MfMephB8lR3Kp66S?p=preview
but for some reason an odd space is forming on top of the page.
This started happening after I changed the Material Chart library :
google.load("visualization", "1.1", {packages:["bar"]});
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
var data = new google.visualization.DataTable();
and used a classic chart instead (I need it since the Material Library is not complete and it doesn't allow custom Tooltips):
google.load('visualization', '1', {packages: ['corechart', 'bar']});
var chart = new google.visualization.BarChart(document.getElementById('columnchart_material'));
var data = google.visualization.arrayToDataTable([]);
This is the original Material Chart -> http://plnkr.co/edit/dMVKt3ISlMtyiYmVeN1K?p=preview
What's wrong?
Add settings for the chart area, for example:
chartArea: { width: '100%', height: '99%' },
or:
chartArea: { left: 0, top: 30, width: 1200, height: 5450 },
A bit of a hack but the below will "sort it"...
#columnchart_material{margin-top:-500px}
Can't quite work out why it's happening in the first place though?
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.
Here is my code: jsfiddle
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
function drawColumnChart(container, data) {
var data = google.visualization.arrayToDataTable(data);
var chart = new google.visualization.ColumnChart(container);
var options = {fontSize: 16};
chart.draw(data, options);
}
$(document).ready(function(){
drawColumnChart($("#satisfactionBarGraph")[0], [
['satisfaction', 'percent'],
['大変満足', 10 ],
['満足', 22 ],
['やや満足', 30 ],
['やや不満', 10 ],
['不満', 5 ]
]);
});
</script>
</head>
<body>
<div id="satisfactionBarGraph" style="width: 524px; height: 370px;" class="chartContainer"></div>
</body>
</html>
And this is what I really want:
I have two problems:
(1) I want the text below the x-axis to align top bottom
I have run through the document but cannot find the option
(2) I want the columns to be in different colors
Because I have only one filed, so all of them are in the same color. I'm wondering whether I used the right chart.
And suggestion will be appreciated
Thanks a lot for all your answers. I combined your solutions and finally figured it out:
final result
Hope this can help anyone who meets the same problem
The Google Visualization API's ColumnCharts color data by series, so if you want multiple colors for your bars, you have to split them into different series.
function drawColumnChart(container, data) {
var data = google.visualization.arrayToDataTable(data);
var columns = [0];
for (var i = 0; i < data.getNumberOfRows(); i++) {
columns.push({
type: 'number',
label: data.getColumnLabel(1),
calc: (function (x) {
return function (dt, row) {
return (row == x) ? dt.getValue(row, 1) : null;
}
})(i)
});
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
var chart = new google.visualization.ColumnChart(container);
var options = {
fontSize: 16,
// set the "isStacked" option to true to make the column spacing work
isStacked: true
};
chart.draw(view, options);
}
// use the callback from the google loader to draw the chart rather than document ready
google.load("visualization", "1", {packages:["corechart"], callback: function () {
drawColumnChart($("#satisfactionBarGraph")[0], [
['satisfaction', 'percent'],
['大変満足', 10],
['満足', 22],
['やや満足', 30],
['やや不満', 10],
['不満', 5]
]);
}});
Here's a jsfiddle of this code: http://jsfiddle.net/asgallant/Rrhak/
I don't think the Visualization API supports vertical writing like that. You can rotate text to be aligned vertically, but that's not what you are trying to achieve here.
You can get vertical labels like you want with a little bit of finagling.
I put a sample here:
I hope this answer makes you 大変満足.
Add Spaces
Your data needs to have each character with a space between it so that they can be broken up in to separate lines:
['satisfaction', 'percent'],
['大 変 満 足', 10 ],
['満 足', 22 ],
['や や 満 足', 30 ],
['や や 不 満', 10 ],
['不 満', 5 ]
Change Axis Display Values
For the hAxis you need to set the following options:
maxTextLines: 5,
slantedText: false,
showTextEvery: 1,
minTextSpacing: 40,
maxAlternation: 1
maxTextLines will allow your labels to be broken up in to multiple vertical lines. 4 would likely work as well as 5 here, since you only have 4 characters.
slantedText ends up being used over splitting up over multiple lines for some reason. So I turned it off manually.
showTextEvery prevents it from showing horizontal labels on one line by only display a subset of your axis labels.
minTextSpacing ensures that even though your lines are one character wide, the chart is fooled in to thinking that it needs to add line breaks.
maxAlternation prevents you from having two 'levels' of labels so that they all line up flush with the axis.
Adjust the Height of the Chart
If you leave the chart height as default, there is only space for 2 lines of labels, so you end up with labels that say
や
や
…
To prevent that, you need to artificially increase the height of the chart. There are a dozen ways to do this, I just set the height property manually.
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.
I'm trying to include a Google Pie Chart in my Rails app, and I've run into what I think is a particularly weird error.
The problem is, when I input numbers, the chart displays perfectly (showing my two input numbers as the two components of a pie equal to their sum), but when I try to feed it dynamic data, it seems to PICK UP the data but NOT USE it correctly -- instead displaying the two numbers as slivers in an otherwise blank chart. Code examples:
This works perfectly, turning into a pretty pie chart with the correct values (sold and left, below):
<div id="chart_div"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var sold = 406;
var left = 38;
var data = google.visualization.arrayToDataTable([
['Pounds', 'Sold/Left'],
['Pounds Sold', sold],
['Left', left]
]);
var options = {
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
This, however, produces a chart with a hover showing (in this case) the exact same numbers (406, and 38), but the two chart sections are extremely small, accounting for about 1% of the chart's volume (as opposed to the ideal 100%). The remaining 99ish% of the chart is blank:
<div id="chart_div" data-sold=<%= #animal.pounds_sold.to_i %> data-left=<%= #animal.pounds_left.to_i %> ></div>
// Here, the numbers equal 406 and 38, as in the above.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var sold = $(document).find('#chart_div').attr('data-sold');
var left = $(document).find('#chart_div').attr('data-left');
var data = google.visualization.arrayToDataTable([
['Pounds', 'Sold/Left'],
['Pounds Sold', sold],
['Left', left]
]);
var options = {
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
One possible clue is that when I hover over the sections in this erroring chart, although the hover says the right numbers (406, 38), it says these sections account for only 1 and 0.2 percent of the pie, respectively, even though the rest of the pie is blank (and has no hover/hover value).
Any ideas what's going on here? I'm guessing I'm committing some javascript/jquery crime, cause I'm fairly new to it, but I don't know what.
Thanks!
EDIT -- Another weird thing. I tried to see what would happen in a hybrid scenario with both dynamic numbers and straight numbers, i.e the below modification to the dynamic version above:
...
var other = 50;
var sold = $(document).find('#chart_div').attr('data-sold');
var left = $(document).find('#chart_div').attr('data-left');
var data = google.visualization.arrayToDataTable([
['Pounds', 'Sold/Left'],
['Pounds Sold', sold],
['Left', left],
['Test', other]
]);
...
This, inexplicably (to me), led to NO CHART AT ALL.
I think the issue is that you are specifying the "values" of each sliver as a string. Try defining them as an INT and your pie should work