I use Google Visualization API to plot Line Chart. Here are the codes:
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawCharts);
function drawCharts() {
// Total Coupon View
var data_total_users = new google.visualization.DataTable();
data_total_users.addColumn('string', 'Total Users');
data_total_users.addColumn('number', 'User Count');
data_total_users.addRows(7);
data_total_users.setValue(0, 0, 'Sunday');
data_total_users.setValue(0, 1, 10);
data_total_users.setValue(1, 0, 'Monday');
data_total_users.setValue(1, 1, 4);
data_total_users.setValue(2, 0, 'Tuesday');
data_total_users.setValue(2, 1, 3);
data_total_users.setValue(3, 0, 'Wednesday');
data_total_users.setValue(3, 1, 7);
data_total_users.setValue(4, 0, 'Thursday');
data_total_users.setValue(4, 1, 8);
data_total_users.setValue(5, 0, 'Friday');
data_total_users.setValue(5, 1, 10);
data_total_users.setValue(6, 0, 'Saturday');
data_total_users.setValue(6, 1, 10);
var chart = new google.visualization.LineChart(document.getElementById('chart_users_total'));
chart.draw(data_total_users, {width: 1000, height: 400, title: '', hAxis: {title: ''}});
}
The result looks like this:
Question is: How can I remove the -0.5, -1.0 ? Also, I would like to have integers (e.g. 0, 1, 2, 3, ...) in Y-axis. Which parameter should I add?
In your chart.draw call, add:
vAxis:{viewWindow: {min: 0}}
if set options vAxis: {viewWindow: {min: 0}} did not work try to set vAxis:{viewWindow: {min: 0, max: 10}}
Related
I am working with Google's Charting API and I have a problem where the graph will sometimes have 0 in the middle of the y axis and underneath show negative numbers.
I want to set the chart to be a minimum of 0 and found on Google that all I need to do is add vAxis:{viewWindow: {min: 0}}.
I'm drawing my chart like the below
function (result)
{
alert(result);
var obj = $.parseJSON(result);
var resultData = obj.DATA;
var data = new google.visualization.DataTable(resultData);
var options = {
title: "Crash counts for ",
pointSize: 6,
hAxis: {showTextEvery: 2, slantedText: true, slantedTextAngle: 30},
animation: {
duration: 1000,
easing: 'out'
}
vAxis:{viewWindow: {min: 0}}
};
var chart = new google.visualization.LineChart(document.getElementById("lineChart"));
chart.draw(data, options);
}
), "json";
}
Chrome says that the line vAxis has an error which is unexpected identifier.
Well, really simple mistake, you just forgot to add a , after animation :
var options = {
title: "Crash counts for ",
pointSize: 6,
hAxis: {showTextEvery: 2, slantedText: true, slantedTextAngle: 30},
animation: {
duration: 1000,
easing: 'out'
}, // here is the change
vAxis:{viewWindow: {min: 0}}
};
How do I adjust the column width on a google combo chart? Below is my code, but I can't figure out how to set the column width. Depending on the data I enter, the api makes the columns different widths. I'd like them all 10px. I've been trying to set the with with bar.groupWidth but cannot. Any ideas?
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function getValueAt(column, dataTable, row) {
return dataTable.getFormattedValue(row, column);
}
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Time', 'Boluses', 'Total Volume', '30 mL/kg', { role: 'annotation' }], [0,0,0,1769.1, null],[9, 500, 500, 1769.1, null],[29, 250, 750, 1769.1, null],[44, 250, 1000, 1769.1, null],[114, 2000, 3000, 1769.1, null],[238, 0, 3000, 1769.1, null],[238, 0, 3000, 1769.1, null],[288, 85, 3085, 1769.1, null],[288, 6.8, 3091.8, 1769.1, null],[348, 100, 3191.8, 1769.1, null],[348, 8, 3199.8, 1769.1, null],[408, 100, 3299.8, 1769.1, null],[408, 8, 3307.8, 1769.1, null],[360, 0, 3307.8, 1769.1, null]
]);
var view = new google.visualization.DataView(data);
var options = {
title: 'sepsis treatment summary',
fontName: 'Lato',
titleTextStyle: {fontSize: 18},
annotation: {},
vAxis: {title: 'total fluids received (mL)', minValue: 0, gridlines: {count: 6}},
hAxis: {title: 'time after alert (minutes)', viewWindow: {min: 0, max: 360}, gridlines: {count: 6}},
seriesType: "bars",
series: {
1: {color: '#99CCFF', type: "area"},
2: {color: 'red', type: "line", lineDashStyle: [10, 2]},
3: {role: "annotation"}
},
annotations: {style: 'line'},
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(view, options);
}
This code creates the following chart:
The API calculates a maximum width for each bar group that is roughly:
var chartWidth, // chart area width in pixels
axisRange, // axis max value - axis min value
data, // DataTable, assume axis values are in column 0 for this exercise, and that data is sorted ascending
minSeparation = axisRange, // will hold the minimum separation between daat points
barGroupWidth;
// calculate the minimum distance between any two adjacent points
for (var i = 1; i < data.getNumberOfRows(); i++) {
if (data.getValue(i, 0) - data.getValue(i - 1, 0) < minSeparation) {
minSeparation = data.getValue(i, 0) - data.getValue(i - 1, 0);
}
}
// calculate the maximum width of a bar group
barGroupWidth = chartWidth * minSeparation / axisRange;
Pleaase note that this function is a rough approximation of what the API does based on what I was able to reverse engineer.
So, if you have a chart that has a chart area 300 pixels wide with an axis range of 100 and a minimum separation between adjacent points of 10, your maximum bar group width will be 30 pixels. If you try to set the bar group width above this value, your setting will be ignored.
In your case, you have adjacent points with a separation of 0 (rows 5 and 6, 7 and 8, 9 and 10, 11 and 12), which would result in a bar group width of 0 by my rough approximation. The actual algorithm is more generous, and is likely giving you 1 pixel wide groups. There is no setting you can change to make the bar groups wider, your only recourse is to change your data set to space the values out more. This may not be easy to do, but I would suggest starting by thinking about what it means to have two events at the same time with different values, and how you might be able to represent that differently.
Trying to do a chart to show/hide the lines on click (I think the original code is from #asgallant), but it only works after the first interaction.
PS.: Is it possible to gray out the text in the legend too?
FIDDLE
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable
([
['Time', 'One', 'Two', 'Three', 'Four', 'Five'],
['05/2013', 0, 3, 0, 0, 8],
['06/2013', 0, 3, 1, 0, 7],
['07/2013', 0, 3, 1, 0, 7],
['08/2013', 0, 3, 1, 0, 7],
['09/2013', 0, 3, 1, 0, 7],
['10/2013', 0, 3, 1, 0, 7],
['11/2013', 0, 3, 1, 0, 7],
['12/2013', 0, 3, 1, 0, 7],
['01/2014', 0, 3, 1, 0, 7],
['02/2014', 0, 3, 1, 0, 7],
['03/2014', 0, 3, 1, 0, 7],
['04/2014', 0, 2, 1, 0, 7],
['05/2014', 0, 2, 1, 0, 7]
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
var columns = [];
var series = {};
for (var i = 0; i < data.getNumberOfColumns(); i++) {
columns.push(i);
if (i > 0) {
series[i - 1] = {};
}
}
var options = {
chartArea: {width: '80%', height: '70%'},
fontSize: ['13'],
lineWidth: 3,
pointSize: 10,
series: series
};
google.visualization.events.addListener(chart, 'select', function () {
var sel = chart.getSelection();
// if selection length is 0, we deselected an element
if (sel.length > 0) {
// if row is undefined, we clicked on the legend
if (sel[0].row === null) {
var col = sel[0].column;
if (columns[col] == col) {
// hide the data series
columns[col] = {
label: data.getColumnLabel(col),
type: data.getColumnType(col),
calc: function () {
return null;
}
};
// grey out the legend entry
series[col - 1].color = '#CCCCCC';
}
else {
// show the data series
columns[col] = col;
series[col - 1].color = null;
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
chart.draw(view, options);
}
}
});
}
I'm having trouble keeping the same level of opacity on an element with a gradient filled color
var paper = Raphael(0, 0, 300, 300);
paper.path(["M", 20, 20, "h", 200, "v", 200, "h", -200, "z"]).attr({
"stroke-width": 3,
stroke: 'red',
"opacity": 0.5,
fill: "90-red-red"
});
http://jsfiddle.net/zhirkovski/vvAaz/1/
as you can see the gradient starts off at 0.5, but increases to 1 by the time it reaches the second color, why? Even if you change the colors, one of them renders at opacity = 1, is this a bug? if so is there a work-around, or is it something i'm doing wrong?
From my own investigation this looks like a limitation of VML and subsequently Raphael. You can find more information via the following bug report: https://github.com/DmitryBaranovskiy/raphael/issues/211
It really limits what you can do with gradients and fades which is a bane for all of us. The best way to do this would be with jQuery:
// Setting up defaults
var paper = Raphael("canvas", 200, 200);
var bgBottom = paper.rect(0, 0, 200, 200).attr({fill: "90-#999-#fff"});
var bgTop = paper.rect(0, 0, 200, 200).attr({fill: "90-#999-#fff"});
// New gradient to fade to
bgBottom.attr({fill: "90-#069-#000"});
$(bgTop.node).animate({opacity: 0}, 1000);
You can then animate the top in and out with fill changes:
bgTop.attr({fill: "90-#f0f-#fff"});
$(bgTop.node).animate({opacity: 1}, 1000);
Here's my jsfiddle to help demonstrate: http://jsfiddle.net/spQsf/
Hope this helps!
is it possible to add axis title, on Google Charts (Line Chart), and not to change Tick marks?
Tnx in adv!
Yes you can. Here's a slightly modified example from:
http://code.google.com/apis/ajax/playground/?type=visualization#line_chart
The trick is to gets axis labels for two vertical axis (haven't figured out how to do that).
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'Cats');
data.addColumn('number', 'Blanket 1');
data.addColumn('number', 'Blanket 2');
data.addRow(["A", 1, 1, 0.5]);
data.addRow(["B", 2, 0.5, 1]);
data.addRow(["C", 4, 1, 0.5]);
data.addRow(["D", 8, 0.5, 1]);
data.addRow(["E", 7, 1, 0.5]);
data.addRow(["F", 7, 0.5, 1]);
data.addRow(["G", 8, 1, 0.5]);
data.addRow(["H", 4, 0.5, 1]);
data.addRow(["I", 2, 1, 0.5]);
data.addRow(["J", 3.5, 0.5, 1]);
data.addRow(["K", 3, 1, 0.5]);
data.addRow(["L", 3.5, 0.5, 1]);
data.addRow(["M", 1, 1, 0.5]);
data.addRow(["N", 1, 0.5, 1]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10, title: "my Axis"}}
);
}
google.setOnLoadCallback(drawVisualization);
</script>