More than two Google Charts on a single page? - javascript

I've been struggling with this problem for a while now, and it seems like google has made a lot of minor changes to the Google Charts API over the years, which has been making it even harder to find an answer for why my charts aren't working.
I am simply trying to display more than two of the same chart type (Bar graphs) on a single page. Just today, I found a solution that allowed me to display 2 charts at once (link: "Google Charts stops drawing after first chart"), but this was only a minor win because I really need more than 2 charts to show, and this solution just forces one graph to render before the other.
Here is my current code:
Javascript
google.load('visualization', '1', {packages: ['corechart', 'line', 'bar']});
google.setOnLoadCallback(drawStuff);
function drawStuff() {
// Courses_Played Data
var data = new google.visualization.arrayToDataTable([
['', 'Number of Rounds Played'],
["Ken McDonald", 10],
["ASU Karsten", 8],
["TPC Scotts...", 7],
["Ahwatukee", 3],
['Other', 3]
]);
// Courses_played Options
var options = {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: {x: {0: { side: 'bottom' }}},
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
};
// Course_Scores Data
var data2 = new google.visualization.arrayToDataTable([
['', 'Number of Rounds Played'],
["TPC Scotts...", 81],
["ASU Karst...", 83],
["Ken McDonald", 87],
["Ahwatukee", 90],
]);
//Course_Scores Options
var options2 = {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: {x: {0: { side: 'bottom' }}},
vAxis:{ viewWindow:{ min:60 }},
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
};
var chart = new google.charts.Bar(document.getElementById('Courses_Played'));
google.visualization.events.addOneTimeListener(chart, 'ready', function(){
var chart2 = new google.charts.Bar(document.getElementById('Course_Scores'));
// Convert the Classic options to Material options.
chart2.draw(data2, google.charts.Bar.convertOptions(options2));
});
chart.draw(data, google.charts.Bar.convertOptions(options));
};
Again, this code currently works, but only because I used a solution that works for just two graphs. The problem seems to be in the final lines of code, because forcing chart2 to render before the first chart is what got it working. I just don't get what I need to do to allow for three or more graphs. Is there a way to force any number of charts to render one before the other?

The problem in Google Charts is that you can call google.charts.load() only once. So you need to include all the packages in this single function call and call this from head of the webpage.
You can include multiple packages like this:
<head><script type="text/javascript">
google.charts.load("current", {packages:["corechart","bar"]});
</script>
</head>
This solved my problem and allowed me to display multiple charts on a single page without changing any code.
To verify check this:
https://developers.google.com/chart/interactive/docs/basic_load_libs#basic-library-loading

The following example shows how to render 3 Google Charts (of google.charts.Bar type) on a single page:
google.load('visualization', '1', { packages: ['corechart', 'line', 'bar'] });
google.setOnLoadCallback(drawCharts);
function drawCharts() {
var chartsData = [
{
'data': [
['', 'Number of Rounds Played'],
["Ken McDonald", 10],
["ASU Karsten", 8],
["TPC Scotts...", 7],
["Ahwatukee", 3],
['Other', 3]
],
'options': {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: { x: { 0: { side: 'bottom' } } },
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
},
'chartDivId' : 'Courses_Played'
},
{
'data': [
['', 'Number of Rounds Played'],
["TPC Scotts...", 81],
["ASU Karst...", 83],
["Ken McDonald", 87],
["Ahwatukee", 90],
],
'options': {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: { x: { 0: { side: 'bottom' } } },
vAxis: { viewWindow: { min: 60 } },
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
},
'chartDivId' : 'Course_Scores'
},
{
'data': [
['', 'Number of Rounds Played in 2014'],
["Ken McDonald", 5],
["ASU Karsten", 4],
["TPC Scotts...", 7],
["Ahwatukee", 4],
['Other', 6]
],
'options': {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: { x: { 0: { side: 'bottom' } } },
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
},
'chartDivId' : 'Courses_Played2014'
},
];
drawBarCharts(chartsData);
};
function drawBarCharts(chartsData,index) {
var curIndex = index || 0;
var chartData = chartsData[curIndex];
var dataTable = new google.visualization.arrayToDataTable(chartData.data);
var chart = new google.charts.Bar(document.getElementById(chartData.chartDivId));
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
if (curIndex < chartsData.length - 1)
drawBarCharts(chartsData, curIndex + 1);
});
chart.draw(dataTable, google.charts.Bar.convertOptions(chartData.options));
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="Courses_Played"></div>
<div id="Courses_Played2014"></div>
<div id="Course_Scores"></div>
or using this way where charts are inserted on the page dynamically
google.load('visualization', '1', { packages: ['corechart', 'line', 'bar'] });
google.setOnLoadCallback(drawCharts);
function drawCharts() {
var chartsData = [
{
'data': [
['', 'Number of Rounds Played'],
["Ken McDonald", 10],
["ASU Karsten", 8],
["TPC Scotts...", 7],
["Ahwatukee", 3],
['Other', 3]
],
'options': {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: { x: { 0: { side: 'bottom' } } },
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
},
'chartDivId' : 'Courses_Played'
},
{
'data': [
['', 'Number of Rounds Played'],
["TPC Scotts...", 81],
["ASU Karst...", 83],
["Ken McDonald", 87],
["Ahwatukee", 90],
],
'options': {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: { x: { 0: { side: 'bottom' } } },
vAxis: { viewWindow: { min: 60 } },
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
},
'chartDivId' : 'Course_Scores'
},
{
'data': [
['', 'Number of Rounds Played in 2014'],
["Ken McDonald", 5],
["ASU Karsten", 4],
["TPC Scotts...", 7],
["Ahwatukee", 4],
['Other', 6]
],
'options': {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: { x: { 0: { side: 'bottom' } } },
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
},
'chartDivId' : 'Courses_Played2014'
},
];
drawBarCharts(chartsData);
};
function drawBarCharts(chartsData,index) {
var curIndex = index || 0;
var chartData = chartsData[curIndex];
var dataTable = new google.visualization.arrayToDataTable(chartData.data);
var chartDiv = document.createElement('div');
chartDiv.id = chartData.chartDivId;
document.getElementById('chartContainer').appendChild(chartDiv);
var chart = new google.charts.Bar(document.getElementById(chartDiv.id));
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
if (curIndex < chartsData.length - 1)
drawBarCharts(chartsData, curIndex + 1);
});
chart.draw(dataTable, google.charts.Bar.convertOptions(chartData.options));
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chartContainer"></div>

I think you're having a problem with the current version, which has issues.
You shouldn't need to wait for one chart to load before loading another.
Here is an example that loads version 41 --> all 3 charts draw, without waiting on another.
google.charts.load('41', {packages: ['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
// Courses_Played Data
var data = new google.visualization.arrayToDataTable([
['', 'Number of Rounds Played'],
["Ken McDonald", 10],
["ASU Karsten", 8],
["TPC Scotts...", 7],
["Ahwatukee", 3],
['Other', 3]
]);
// Courses_played Options
var options = {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: {x: {0: { side: 'bottom' }}},
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
};
// Courses_Played2014 Data
var data3 = new google.visualization.arrayToDataTable([
['', 'Number of Rounds Played'],
["Ken McDonald", 14],
["ASU Karsten", 12],
["TPC Scotts...", 11],
["Ahwatukee", 7],
['Other', 7]
]);
// Courses_played2014 Options
var options3 = {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: {x: {0: { side: 'bottom' }}},
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
};
// Course_Scores Data
var data2 = new google.visualization.arrayToDataTable([
['', 'Number of Rounds Played'],
["TPC Scotts...", 81],
["ASU Karst...", 83],
["Ken McDonald", 87],
["Ahwatukee", 90],
]);
//Course_Scores Options
var options2 = {
title: '',
width: 440,
height: 215,
legend: { position: 'none' },
axes: {x: {0: { side: 'bottom' }}},
vAxis:{ viewWindow:{ min:60 }},
bar: { groupWidth: "70%" },
colors: ['darkgreen'],
};
var chart = new google.charts.Bar(document.getElementById('Courses_Played'));
var chart2 = new google.charts.Bar(document.getElementById('Course_Scores'));
var chart3 = new google.charts.Bar(document.getElementById('Courses_Played2014'));
chart.draw(data, google.charts.Bar.convertOptions(options));
chart2.draw(data2, google.charts.Bar.convertOptions(options2));
chart3.draw(data3, google.charts.Bar.convertOptions(options3));
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="Courses_Played"></div>
<div id="Courses_Played2014"></div>
<div id="Course_Scores"></div>

Am using gviz_api python module to load data.
In case helps:
change arrayToDataTable to DataTable

Related

How to disable hover state in google chart column?

I would like to know what is other option that I need to disabled the hover state of my column bar. I try this code
'tooltip' : {
trigger: 'none'
}
this doesn't work.
I only have a simple code here
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Phase', 'Sales', 'Expenses', 'Profit'],
['1', 20, 40, 70],
['2', 90, 75, 50],
['3', 20, 40, 10],
['4', 30, 75, 80],
['5', 100, 75, 50],
['6', 50, 90, 50],
['7', 100, 75, 20],
['8', 40, 30, 50],
]);
var options = {
tooltip: { trigger: 'none'},
bars: 'vertical',
vAxis: {format: 'decimal'},
enableInteractivity: false,
height: 400,
colors: ['#ac226d', '#016ac6', '#fff'],
backgroundColor: '',
legend: { position: "none" },
bar: {groupWidth: "15%"},
hAxis: {
textStyle:{color: '#FFF'}
},
series: {
lineWidth: 10
},
vAxis: {
textStyle:{color: '#FFF'},
},
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
I try to search it, but the only answer that I find is the trigger:none.
look at this:
Tooltips | Charts | Google Developers
you can add column with rol tooltip and empty it.
Try setting this option:
var options = {
enableInteractivity: false
}

Google Chart : How to change color for negative values

I currently have a nice AreaChart using GoogleCharts, however I'm trying to change the color and background color of the chart when values are negative.
From what I found, idea would be to display one area for positive values only, and another one for negative values, so that I could custom colors. However you can see below I didn't really success to do it.
Any idea?
Thanks,
Tim
google.charts.load('current', {
packages: ['corechart', 'line']
});
google.charts.setOnLoadCallback(drawLineColors);
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'
},
colors: ['#FF0000', '#0000FF']
};
var dataView = new google.visualization.DataView(data);
dataView.setColumns([0, {
calc: function(data, row) {
return data.getValue(row, 2) - data.getValue(row, 1);
},
type: 'number',
label: 'Blue'
}]);
dataView.setColumns([1, {
calc: function(data, row) {
return data.getValue(row, 1) - data.getValue(row, 2);
},
type: 'number',
label: 'Red'
}]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(dataView, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
the config option for colors maps a color to each series
in this case, there is only one series (or column) -- variance
instead, use a style column role to define the color for each row
also: using setColumns multiple times, overwrites any previous calls to setColumns
provide all the columns at the same time
the columns array can contain...
an integer as a reference to a column index of the data table
or an object for a custom function
see following working snippet...
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, 2) - 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>
EDIT
or if you want separate lines for each team...
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'
},
colors: ['#0000FF', '#FF0000']
};
var dataView = new google.visualization.DataView(data);
dataView.setColumns([
// reference first column by index
0,
// team Y is better
{
calc: function(data, row) {
var val = data.getValue(row, 2) - data.getValue(row, 1);
if (val > 0) {
return val;
}
return null;
},
type: 'number',
label: 'Blue'
},
// team X is better
{
calc: function(data, row) {
var val = data.getValue(row, 1) - data.getValue(row, 2);
if (val > 0) {
return val;
}
return null;
},
type: 'number',
label: 'Red'
},
]);
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>

Google chart set stroke-width of line chart to null

I am currently facing an issue with Google charts which looks fairly simply. All I need is to remove the stroke-width of the current chart:
And make it look like the chart below:
What I have is a stacked area chart, so the options were set as follows:
var options = {
'title': '',
isStacked: true,
legend: {
textStyle: { fontSize: '16' },
position: 'top'
},
hAxis: {
title: '',
gridlines: {
color: '#000000', //Note: 'count: 4' attribute is only possible for continuous...so try to find a way for non-continuous h axis
},
textStyle: {
fontName: 'Arial',
fontSize: '18'
}
//ticks: [0, 100, 200, 75, 100] // display labels every 25
},
vAxis: {
title: '',
gridlines: {
color: '#D3D3D3',
count: 10,
//lineDashStyle: [2,2]
},
textStyle: {
fontName: 'Arial',
fontSize: '18'
},
viewWindow: { max: range_max, min: range_min } //TODO: make them generable
//showTextEvery: 100
},
'width': 1100, //100% //TODO: make this relative
'height': 600,
crosshair:
{
trigger: 'both'
},
series:
{
0: { pointSize: 8 },
3: { lineDashStyle: [5, 1, 3] },
4: { type: 'area', color: 'transparent'}, //visibleInLegend: false
5: { type: 'area', backgroundColor: { strokeWidth: 0 } } // color: 'transparent'
},
intervals: { 'style': 'line' },
colors: ['#ff0000', '#000000', '#0000ff', '#000000', '#000000', '#000000']
}
But the strokeWidth property doesn't seem to be working. Any suggestions on what I am doing wrong please?
using a style column, you customize each series individually
it works the same for all the Column Roles, (annotation, style, etc...)
the role is applied to which ever series column it follows
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', {type: 'string', role: 'style'}, 'Line 1', 'Line 2'],
// add same style for each point, series 1 only
['2013', 1000, 400, 'stroke-width: 0;', 200, 400],
['2014', 1170, 460, 'stroke-width: 0;', 200, 400],
['2015', 660, 1120, 'stroke-width: 0;', 200, 400],
['2016', 1030, 540, 'stroke-width: 0;', 200, 400]
]);
var options = {
isStacked: true,
title: 'Company Performance',
hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 },
series:
{
0: { id: 'ss223', type: 'area', color: 'transparent' },
1: { type: 'area', color: 'black' },
2: { type: 'line', color: 'red' },
3: { type: 'line', color: 'blue' }
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
problem with the above example, the legend is now out of sync with the series style
use the chart's 'ready' event to correct the legend entry,
the black line will be a path element
depending on the styles used, the logic may need to be adjusted, but works here
the elements found in the container will be in the same order as the data
see following working snippet to correct legend entry...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', {type: 'string', role: 'style'}, 'Line 1', 'Line 2'],
// add same style for each point, series 1 only
['2013', 1000, 400, 'stroke-width: 0;', 200, 400],
['2014', 1170, 460, 'stroke-width: 0;', 200, 400],
['2015', 660, 1120, 'stroke-width: 0;', 200, 400],
['2016', 1030, 540, 'stroke-width: 0;', 200, 400]
]);
var options = {
isStacked: true,
title: 'Company Performance',
hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 },
series:
{
0: { id: 'ss223', type: 'area', color: 'transparent' },
1: { type: 'area', color: 'black' },
2: { type: 'line', color: 'red' },
3: { type: 'line', color: 'blue' }
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
Array.prototype.forEach.call(container.getElementsByTagName('path'), function(path) {
if (path.getAttribute('stroke') === '#000000') {
path.setAttribute('stroke', 'transparent');
}
});
});
chart.draw(data, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Customize Google line chart

I am working on project that need a line chart and I chose Google line chart because that is easy to get and fast to use but I have problem with customizing some feature in Google line chart is there a way to can customize Google chart like the this image?? I tried and use rotation but I didn't get the my outcome of that!!!
Here is the Google Line chart Sample Code
function drawChart() {
var data = google.visualization.arrayToDataTable([
['X', 'Y'],
[1, 100], // keep linked points adjacent
[1, 200],
[null, null], // insert blank row in between
[2, 150],
[2, 275],
[null, null],
[3, 75],
[3, 200],
[null, null],
[4, 100],
[4, 300]
]);
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(data, {
height: 400,
width: 600,
pointSize: 20,
pointShape: 'triangle', rotation: 180
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
You can do this by splitting your data points into separate series and drawing them with different point shape options:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['X', 'Y', 'Direction'],
[1, 100, 'down'], // keep linked points adjacent
[1, 200, 'up'],
[null, null, null], // insert blank row in between
[2, 150, 'down'],
[2, 275, 'up'],
[null, null, null],
[3, 75, 'down'],
[3, 200, 'up'],
[null, null, null],
[4, 100, 'down'],
[4, 300, 'up']
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
// down triangles
type: 'number',
calc: function (dt, row) {
return (dt.getValue(row, 2) == 'down') ? dt.getValue(row, 1) : null;
}
}, {
// up triangles
type: 'number',
calc: function (dt, row) {
return (dt.getValue(row, 2) == 'up') ? dt.getValue(row, 1) : null;
}
}]);
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(view, {
height: 400,
width: 600,
series: {
0: {
// this will draw the line
pointSize: 0,
color: '#3366cc' // set the color so they are all the same
},
1: {
// this will draw the down triangles
lineWidth: 0,
pointSize: 20,
pointShape: {
type: 'triangle',
rotation: 180
},
visibleInLegend: false,
color: '#3366cc' // set the color so they are all the same
},
2: {
// this will draw the up triangles
lineWidth: 0,
pointSize: 20,
pointShape: {
type: 'triangle'
},
visibleInLegend: false,
color: '#3366cc' // set the color so they are all the same
}
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
http://jsfiddle.net/asgallant/6dhm8u3y/

Google Charts - Full width for line chart

I use combo google chart to display my data and goals on the graph like this:
I want to display goal lines on a full width of the graph, like this:
Here is what I've tried but with no luck:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="//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 = google.visualization.arrayToDataTable([
['Month', 'RUH %', 'SJA %', 'Goal 30', 'Goal 60'],
['GKP', 16, 93, 30, 60],
['HKP', 13, 11, 30, 60],
['SKP', 15, 11, 30, 60],
['AEV', 19, 80, 30, 60],
['AE', 63, 69, 30, 60]
]);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'RUH og SJA måloppnåelse',
width: 600,
height: 400,
chartArea: {'width': '90%', 'height': '80%'},
colors: ["blue", "green"],
legend: { position: 'bottom' },
vAxis: {title: ""},
hAxis: {title: ""},
seriesType: "bars",
series: {2: {type: "line", visibleInLegend: false, color: "red"}, 3:{type: "line", visibleInLegend: false, color: "red"}}
});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
How can I achieve this?
To extend the lines to the edge of the chart, you have to use a continuous type axis, and extend your data set by one row before and after your existing data. You can use a DataView to convert your string labels to formatted numbers, and then use the hAxis.ticks option to set the axis labels:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Month', 'RUH %', 'SJA %', 'Goal 30', 'Goal 60'],
['', null, null, 30, 60],
['GKP', 16, 93, 30, 60],
['HKP', 13, 11, 30, 60],
['SKP', 15, 11, 30, 60],
['AEV', 19, 80, 30, 60],
['AE', 63, 69, 30, 60],
['', null, null, 30, 60]
]);
var ticks = [];
// ignore the first and last rows
for (var i = 1; i < data.getNumberOfRows() - 1; i++) {
ticks.push({v: i, f: data.getValue(i, 0)});
}
var view = new google.visualization.DataView(data);
view.setColumns([{
type: 'number',
label: data.getColumnLabel(0),
calc: function (dt, row) {
return {v: row, f: dt.getValue(row, 0)};
}
}, 1, 2, 3, 4]);
var range = view.getColumnRange(0);
var offset = 0.5; // change this value to adjust the padding to the left and right of the columns in the chart
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(view, {
title : 'RUH og SJA måloppnåelse',
width: 600,
height: 400,
chartArea: {
width: '90%',
height: '80%'
},
colors: ["blue", "green"],
legend: {
position: 'bottom'
},
vAxis: {
title: ""
},
hAxis: {
title: "",
ticks: ticks,
viewWindow: {
min: range.min + offset,
max: range.max - offset
},
gridlines: {
// hide vertical gridlines to match discrete chart display
color: 'transparent'
}
},
seriesType: "bars",
series: {
2: {
type: "line",
visibleInLegend: false,
color: "red"
},
3:{
type: "line",
visibleInLegend: false,
color: "red"
}
}
});
}
see working example here: http://jsfiddle.net/asgallant/J2u3n/

Categories