We Keep Coding

Google Graphs show decimal places on scatter points

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.

Google Charts (or other JS visualization framework) line graphs with different styles/colors within the same line

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.

How to draw a column chart with one single field and multiple colors using google charts

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.

How to label Google Column Chart bars

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.

Google Visualization API, making a line graph

I am trying to make a line chart by using the Google Visualization API, here is my column data definition:
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('date', 'Date');
dataTable.addColumn('number', 'Uptime');
dataTable.addColumn('string', 'Channel');
I want to group my rows by channels and these grouped channels make a line where X axis is the date and the Y axis is the uptime. I am pretty lost at the API and would be greatful of any help.
Thanks

First you create the data then you add it to the chart:
var data = new google.visualization.DataTable();
// 3 columns
dataTable.addColumn('date', 'Date');
dataTable.addColumn('number', 'Uptime');
dataTable.addColumn('string', 'Channel');
// Add 2 rows
data.addRows(2);
// setValue(row, col, value)
data.setValue(0,0, '2009-09-06');
data.setValue(0,1, 1000);
data.setValue(0,2, 'Channel1');
data.setValue(1,0, '2009-09-05');
data.setValue(1,1, 100);
data.setValue(1,2, 'Channel2');
var chart = new google.visualization.LineChart('chartDiv');
chart.draw(data, {
width: width,
height: height,
is3D: true,
title: title,
colors: colors,
enableTooltip: false,
legend: 'bottom' });
Something like that.

Are you sure you don't want google.visualization.LineChart(blah) instead of google.visualization.DataTable()? I mean, you said you wanted a line chart and the documentation says that it's LineChart which you want. Also, tinkering on the playground might be informative.