I'm using google visualization charts in my grails app. I'm using line chart to present some data but it behaves oddly when I add alot rows to data here are screens
how could I prevent such scalling ? I woudl like to scalling be the same when i have alot data and none data. I don't mean the length of chart because its natural it gets bigger when I add more data, but size of labels hAxis labels and vAxis label is getting bigger without reason
here is how I created chart
visualization.draw(visualization_data, {width: 55840, title: 'Wykres wydajno\u015Bci', vAxis: {textPosition: 'in'}, hAxis: {direction: 1, slantedText: true, slantedTextAngle: 90}, pointSize: 10, chartArea: {top: 10, width: '50%', height: '50%', left: 10}, legend: {position: 'right'}});
and styling
#linechart {
overflow-x: scroll;
overflow-y: hidden;
width: 100%;
height: 500px;
}
you can use the textStyle option on both axis' to set the fontSize
textStyle: {
fontSize: 12
}
see following working snippet...
(but width: 55840 seems too wide??)
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', '2005');
data.addColumn('number', '2006');
data.addRows([
[new Date('01/01/2016'), 200, 210],
[new Date('01/02/2016'), 190, 220],
[new Date('01/03/2016'), 205, 200],
[new Date('01/04/2016'), 220, 230],
[new Date('01/05/2016'), 212, 210],
[new Date('01/06/2016'), 185, 193],
[new Date('01/07/2016'), 196, 207],
[new Date('01/08/2016'), 200, 210],
[new Date('01/09/2016'), 190, 220],
[new Date('01/10/2016'), 205, 200],
[new Date('01/11/2016'), 220, 230],
[new Date('01/12/2016'), 212, 210],
[new Date('01/13/2016'), 185, 193],
[new Date('01/14/2016'), 196, 207],
[new Date('01/15/2016'), 200, 210],
[new Date('01/16/2016'), 190, 220],
[new Date('01/17/2016'), 205, 200],
[new Date('01/18/2016'), 220, 230],
[new Date('01/19/2016'), 212, 210],
[new Date('01/20/2016'), 185, 193],
[new Date('01/21/2016'), 196, 207],
[new Date('01/22/2016'), 200, 210],
[new Date('01/23/2016'), 190, 220],
[new Date('01/24/2016'), 205, 200],
[new Date('01/25/2016'), 220, 230],
[new Date('01/26/2016'), 212, 210],
[new Date('01/27/2016'), 185, 193],
[new Date('01/28/2016'), 196, 207],
[new Date('01/29/2016'), 200, 210],
[new Date('01/30/2016'), 190, 220],
[new Date('01/31/2016'), 205, 200]
]);
var options = {
width: 55840,
height: 800,
title: 'Wykres wydajno\u015Bci',
vAxis: {
textPosition: 'in',
textStyle: {
fontSize: 12
}
},
hAxis: {
direction: 1,
slantedText: true,
slantedTextAngle: 90,
textStyle: {
fontSize: 12
}
},
pointSize: 10,
chartArea: {top: 10, width: '50%', height: '50%', left: 10},
legend: {position: 'right'}
};
var chart = new google.visualization.LineChart(document.getElementById('linechart'));
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="linechart"></div>
Related
I'm using google line chart in my project and facing a problem that I need to change color for some segments to visualize the target status changes over time. It should look like this:
I've searched around for quite long but couldn't find a way to do that with google chart.
My workaround is to add another series to the chart and alternately set the value of the second line eq to the first line based on the status but it looks tedious.
Is there a proper way to do this? Here is a sample of my workaround solution:
function drawMultipleTrendlineChart() {
var chart;
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales value A');
data.addColumn('number', 'Sales value B');
data.addRows([
[new Date(2013, 3, 11), 200, 0],
[new Date(2013, 4, 02), 500, 0],
[new Date(2013, 5, 03), 700, 0],
[new Date(2013, 6, 04), 800, 800],
[new Date(2013, 7, 05), 500, 500],
[new Date(2013, 8, 06), 900, 0],
[new Date(2014, 0, 07), 800, 0],
[new Date(2014, 1, 08), 1100, 1100],
[new Date(2014, 2, 09), 1000, 1000],
[new Date(2014, 2, 10), 1000, 0],
[new Date(2014, 3, 11), 800, 0],
]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
prefix: 'R$:'
});
formatter.format(data, 1);
var dateFormatter = new google.visualization.NumberFormat({
pattern: 'MMM yyyy'
});
dateFormatter.format(data, 0);
var chartHeight = 400;
var chartWidth = 600;
var chartOptions = {
tooltip: {
isHtml: true
},
title: 'Trendlines with multiple lines',
isStacked: true,
width: chartWidth,
height: chartHeight,
colors: ['#0000D8', '#00dddd'],
hAxis: {
title: 'example title',
slantedText: false,
slantedTextAngle: 45,
textStyle: {
fontSize: 10
},
format: 'dd-MM-yyyy'
},
chartArea: {
left: 50,
top: 20,
width: (chartWidth - 10),
height: (chartHeight - 90)
}
};
chart = new google.visualization.LineChart(document.getElementById('multipleTrendChart'));
chart.draw(data, chartOptions);
}
google.load('visualization', '1', {
packages: ['corechart'],
callback: drawMultipleTrendlineChart
});
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</script>
</head>
<body>
<div id="multipleTrendChart"></div>
</body>
</html>
After looking at this answer How to change color for negative values, I tried and this works for me. The answer is using DataView API to manipulate the data.
google.charts.load('current', {
callback: drawLineColors,
packages: ['corechart']
});
function drawLineColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Blue Team');
data.addColumn('number', 'Red Team');
data.addRows([
[0, 0, 0],
[3, 1700, 1600],
[6, 1800, 1700],
[9, 2500, 2423],
[12, 3000, 2500],
[15, 4700, 5800],
[18, 5200, 5900],
[21, 5500, 6000],
[24, 6000, 6200],
[27, 6800, 6700],
[30, 7500, 7000],
[33, 7800, 8200],
[36, 7900, 9756],
[39, 8000, 10752],
[42, 9000, 13753],
[45, 15000, 17845]
]);
var options = {
legend: {
position: 'top'
},
enableInteractivity: false,
width: 712,
height: 156,
backgroundColor: {
fill: 'transparent'
},
curveType: 'function',
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Team Gold'
}
};
var dataView = new google.visualization.DataView(data);
dataView.setColumns([
// reference first column by index
0,
// variance
{
calc: function(data, row) {
return data.getValue(row, 1);
},
type: 'number',
label: 'Y'
},
// variance color
{
calc: function(data, row) {
var val = data.getValue(row, 2) - data.getValue(row, 1);
if (val >= 0) {
return '#0000FF';
}
return '#FF0000';
},
type: 'string',
role: 'style'
}
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(dataView, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I have a problem with google charts.
How to make padding between horizontal axil line and labels. And align them differently (first to right, last - to left) - so, they will be inside chart area
How can i remove vertical axis at the end of the chart and leave only zero axis.
code:
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(this.drawBasic);
function drawBasic () {
let data1 = new google.visualization.DataTable();
data1.addColumn('date', 'Date');
data1.addColumn('number', 'K/D');
data1.addRows([
[new Date(2016, 11, 11), 0], [new Date(2016, 11, 12), 10], [new Date(2016, 11, 13), 43], [new Date(2016, 11, 14), 20], [new Date(2016, 11, 15), 56],]);
let options1 = {
height: 125,
chartArea: {
left: 30,
top: 10,
right: 30,
bottom: 20
},
legend: {position: 'none'},
colors: ['#3ec8de'],
tooltip: {trigger: 'none'},
backgroundColor: 'transparent',
hAxis: {
format: 'dd.M',
gridlines: {
color: '#333',
},
ticks: [new Date(2016, 11, 11), new Date(2016, 11, 15)]
},
vAxis: {
gridlines: {
count: 3,
color: 'transparent',
}
},
crosshair: {trigger: 'both', orientation: 'vertical', color: '#b5b5b5'}
};
let chart1 = new google.visualization.LineChart(document.getElementById('overtime-chart1'));
chart1.draw(data1, options1);
}
Here the picture.
And this is link to codepen with code
I want my graph to look like this, where the bar graphs are between the haxis values.
http://imgur.com/C5GF7Ay
My code is as follows:
var data3 = 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 options3 = {
title : 'Monthly Coffee Production by Country',
vAxis: {title: 'Cups'},
hAxis: {title: 'Month'},
seriesType: 'bars',
series: {5: {type: 'line'}}
};
you could try using a continuous axis with dates
then use hAxis.format and hAxis.ticks to only show the years
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Date', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
[new Date(2013, 0, 1), 165, 938, 522, 998, 450, 614.0],
[new Date(2013, 1, 1), 135, 940, 542, 990, 454, 614.1],
[new Date(2013, 2, 1), 157, 942, 562, 988, 458, 614.2],
[new Date(2013, 8, 1), 139, 944, 582, 980, 462, 614.3],
[new Date(2013, 9, 1), 136, 946, 652, 968, 466, 614.4],
[new Date(2014, 10, 1), 152, 938, 522, 998, 450, 614.0],
[new Date(2014, 11, 1), 164, 940, 542, 990, 454, 614.1],
[new Date(2015, 2, 1), 166, 942, 562, 988, 458, 614.2],
[new Date(2015, 3, 1), 158, 944, 582, 980, 462, 614.3],
[new Date(2015, 4, 1), 160, 946, 652, 968, 466, 614.4],
]);
var options = {
title : 'Monthly Coffee Production by Country',
vAxis: {title: 'Cups'},
hAxis: {
title: 'Year',
format: 'yyyy',
ticks: [
new Date(2013, 0, 1),
new Date(2014, 0, 1),
new Date(2015, 0, 1),
new Date(2016, 0, 1)
]
},
bar: {
width: 100
},
seriesType: 'bars',
series: {5: {type: 'line'}}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(container);
chart.draw(data, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
How to do in a google charts API decrease increase point from begin and the end for example 10 pixels from rigth and left or something else
This is as an example:
http://jsfiddle.net/WaUu2/374/
google.load('visualization', '1', {packages: ['controls']});
google.setOnLoadCallback(drawChart);
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Clicks');
data.addColumn('number', 'Position');
data.addRows([
['2003', 0, 0],
['2004', 0, 0],
['2005', 45, 60],
['2006', 155, 50],
['2007', 35, 31],
['2008', 105, 23],
['2009', 120, 56],
['2010', 65, 19],
['2011', 80, 23],
['2012', 70, 300],
['2013', 0, 0],
['2014', 0, 0]
]);
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState= {selectedValues: []};
for (var i = 1; i < data.getNumberOfColumns(); i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
initState.selectedValues.push(data.getColumnLabel(i));
}
var chart = new google.visualization.ChartWrapper({
chartType: 'AreaChart',
containerId: 'chart_div',
dataTable: data,
options: {
fontSize: 11,
width: '90%',
height: '100%',
//colors: ["#36A6FF", "#FF8F36"],
focusTarget: "category",
backgroundColor: "transparent",
pointSize: 3,
legend: { "position": "in" },
hAxis: { minValue: 1, maxValue: 9 },
series: {
0: { color: '#36A6FF' },
1: { color: '#FF8F36' }
}
}
});
var columnFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'colFilter_div',
dataTable: columnsTable,
options: {
filterColumnLabel: 'colLabel',
ui: {
label: 'Filter:',
allowTyping: false,
allowMultiple: true,
allowNone: false,
selectedValuesLayout: 'belowStacked'
}
},
state: initState
});
function setChartView () {
var state = columnFilter.getState();
var row;
var view = {
columns: [0]
};
for (var i = 0; i < state.selectedValues.length; i++) {
row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
view.columns.push(columnsTable.getValue(row, 0));
}
view.columns.sort(function (a, b) {
return (a - b);
});
chart.setView(view);
chart.draw();
}
google.visualization.events.addListener(columnFilter, 'statechange', setChartView);
setChartView();
columnFilter.draw();
}
This is how it's looks like.
try this: just replace your data.addRows([ ..])with
data.addRows([
['2003', 0, 0],
['2004', 0, 0],
['2005', 45, 60],
['2006', 155, 50],
['2007', 35, 31],
['2008', 105, 23],
['2009', 120, 56],
['2010', 65, 19],
['2011', 80, 23],
['2012', 70, 300],
['2013', 0, 0],
['2014', 0, 0]
]);
I'm trying to style and add another 2 x'axis to a Google area chart (a and b in the image). For example, the a axis should be set to 900 and b: 700.
Also trying to extend the chart to the full width of the containing div (960px) but my solution seems to do nothing.
This is the desired effect.
Current js
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['November', 1000, 400],
['December', 1170, 460],
['January', 660, 1120],
['February', 690, 1120],
['March', 780, 1120],
['April', 820, 1120],
['May', 660, 1120],
['June', 1030, 540]
]);
var options = {
title: '',
backgroundColor: 'none',
width:'960',
legend: {position: 'none'},
hAxis: {title: 'Year', titleTextStyle: {color: 'grey'},
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
To get the chart width right, add a chartArea definition to your options object. The chartArea settings are listed in the AreaChart documentation under "Configuration Options":
chartArea: {
left: 40,
top: 10,
width: 900,
height: 350
}
Demo: http://jsfiddle.net/2H7sp/
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['November', 1000, 400],
['December', 1170, 460],
['January', 660, 1120],
['February', 690, 1120],
['March', 780, 1120],
['April', 820, 1120],
['May', 660, 1120],
['June', 1030, 540]
]);
var options = {
title: '',
backgroundColor: 'none',
legend: { position: 'none' },
hAxis: {
title: 'Year',
titleTextStyle: {
color: 'grey'
}
},
chartArea: {
left: 40,
top: 10,
width: 600,
height: 150
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
body { margin: 0; }
#chart_div {
background-color: #f5f5f5;
width: 660px;
height: 200px;
overflow: hidden;
margin: 0 auto;
}
<script src="https://www.google.com/jsapi?jsapi.js"></script>
<div id="chart_div"></div>
You'll need to play with the numbers a little bit. chartArea refers to the graphical portion of the chart, excluding the axes, title, and legend. So you need to add padding to your values in order to leave room.
Edit: To get the horizontal lines, you'll need to add two additional series with values of 900 and 700 for each row in the respective columns:
var data = google.visualization.arrayToDataTable([
[ 'Year', 'Sales', 'Expenses', 'a', 'b' ],
[ 'November', 1000, 400, 900, 700 ],
[ 'December', 1170, 460, 900, 700 ],
[ 'January', 660, 1120, 900, 700 ],
...
To get the colors right, specify a definition for the series option that sets the area invisible and the line color black for the two new series.
var options = {
...
series: {
2: { areaOpacity: 0, color: "#000" },
3: { areaOpacity: 0, color: "#000" }
},
...
This is close, but the lines will be solid instead of dashed, and there will be no labels. You can get these effects by adding columns with roles to your data table. You'll not be able to use .arrayToDataTable() for this, but instead will need to use the more verbose syntax:
var data = new google.visualization.DataTable();
data.addColumn("string", "Year");
data.addColumn("number", "Sales");
data.addColumn("number", "Expenses");
data.addColumn("number", "a");
data.addColumn("number", "b");
data.addRows([
['November', 1000, 400, 900, 700],
['December', 1170, 460, 900, 700],
['January', 660, 1120, 900, 700],
...
For dashed lines add a certainty role column following each of your "a" and "b" columns:
data.addColumn({ type: "boolean", role: "certainty" });
To get the "a" and "b" labels add a annotation role columns following each of your certainty columns:
data.addColumn({ type: "string", role: "annotation" });
The certainty column values should all be false. The annotation column values should all be null except for the last row where you want the label to appear. The annotation aligns above the data point instead of to the right where you want it, but that's as good as you can get.
Your data rows with the new columns added will look like this:
data.addRows([
['November', 1000, 400, 900, false, null, 700, false, null],
['December', 1170, 460, 900, false, null, 700, false, null],
...
['May', 660, 1120, 900, false, null, 700, false, null],
['June', 1030, 540, 900, false, "a", 700, false, "b"]
]);
And, here's the end result: http://jsfiddle.net/2H7sp/2/
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn("string","Year");
data.addColumn("number","Sales");
data.addColumn("number","Expenses");
data.addColumn("number","a");
data.addColumn({type:"boolean",role:"certainty"});
data.addColumn({type:"string",role:"annotation"});
data.addColumn("number","b");
data.addColumn({type:"boolean",role:"certainty"});
data.addColumn({type:"string",role:"annotation"});
data.addRows([
['November', 1000, 400, 900, false, null, 700, false, null],
['December', 1170, 460, 900, false, null, 700, false, null],
['January', 660, 1120, 900, false, null, 700, false, null],
['February', 690, 1120, 900, false, null, 700, false, null],
['March', 780, 1120, 900, false, null, 700, false, null],
['April', 820, 1120, 900, false, null, 700, false, null],
['May', 660, 1120, 900, false, null, 700, false, null],
['June', 1030, 540, 900, false, "a", 700, false, "b"]
]);
var options = {
title: '',
backgroundColor: 'none',
legend: { position: 'none' },
hAxis: {
title: 'Year',
titleTextStyle: { color: 'grey' }
},
series:{
2:{areaOpacity:0,color:"#000"},
3:{areaOpacity:0,color:"#000"}
},
chartArea: {
left: 40,
top: 10,
width: 600,
height: 150
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
body { margin: 0; }
#chart_div {
background-color: #f5f5f5;
width: 660px;
height: 200px;
overflow: hidden;
margin: 0 auto;
}
<script src="https://www.google.com/jsapi?jsapi.js"></script>
<div id="chart_div"></div>