Related
I want to show the x-axis heading of a column chart using google charts in Android web view.
I am trying to show the x-axis heading as Year in
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
But it is not showing heading.
Complete Code;
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
callback: function () {
drawChart();
window.addEventListener('resize', drawChart, false);
},
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
animation:{
duration: 1000,
easing: 'linear',
startup: true
},
height: 600,
theme: 'material',
title: 'Company Performance'
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>
i think the option you're looking for is --> hAxis.title
hAxis: {
title: 'Year'
},
see following working snippet...
google.charts.load('current', {
callback: function () {
drawChart();
window.addEventListener('resize', drawChart, false);
},
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
animation:{
duration: 1000,
easing: 'linear',
startup: true
},
height: 600,
hAxis: {
title: data.getColumnLabel(0)
},
theme: 'material',
title: 'Company Performance'
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>
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>
I am developing a dynamic google chart with asp.net , my problem is that when i pass Double values to google chart it parses the values to integer , even if the value is double , how can i view data as it is (double), here is my code
google.charts.load('current', {
'packages': ['bar']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Egypt', 'Morocco', 'Tunisia'],
['2012', 20.22, 640.52, 200],
['2013', 50.72, 150, 30.52]
]);
var data2 = google.visualization.arrayToDataTable([
['Year', 'Egypt', 'Morocco', 'Tunisia'],
['2012', 30, 100, 100],
['2013', 120, 80, 20]
]);
var data3 = google.visualization.arrayToDataTable([
['Year', 'Egypt', 'Morocco', 'Tunisia'],
['2012', 180, 200, 70],
['2013', 170, 60, 190]
]);
var options2 = {
chart: {
title: 'jordan -mk3',
subtitle: 'jordan -mk3 2012-2013',
backgroundColor: 'transparent'
},
bars: 'vertical',
vAxis: {
format: 'decimal'
},
chartArea: {
backgroundColor: 'transparent',
},
height: 400,
backgroundColor: {
fill: null
},
colors: ['#004389', '#AA2121', '#3C3C3C', '#3C3C3C', '#d95f02']
};
var options1 = {
chart: {
title: 'jordan -mk2',
subtitle: 'jordan -mk2 2012-2013',
backgroundColor: 'transparent'
},
bars: 'vertical',
vAxis: {
format: 'decimal'
},
chartArea: {
backgroundColor: 'transparent',
},
height: 400,
backgroundColor: {
fill: null
},
colors: ['#004389', '#AA2121', '#3C3C3C', '#3C3C3C', '#d95f02']
};
var chart2 = new google.charts.Bar(document.getElementById('chart_div2'));
chart2.draw(data2, options2);
var options3 = {
chart: {
title: 'jordan -mk4',
subtitle: 'jordan -mk4 2012-2013',
backgroundColor: 'transparent'
},
bars: 'vertical',
vAxis: {
format: 'decimal'
},
chartArea: {
backgroundColor: 'transparent',
},
height: 400,
backgroundColor: {
fill: null
},
colors: ['#004389', '#AA2121', '#3C3C3C', '#3C3C3C', '#d95f02']
};
var chart3 = new google.charts.Bar(document.getElementById('chart_div3'));
chart3.draw(data3, options3);
var options = {
chart: {
title: 'jordan -mk4',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'vertical',
vAxis: {
format: 'decimal'
},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3', '#7570b3', '#d95f02']
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, options1);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="chart_div2"></div>
<div id="chart_div3"></div>
The answer was easy just to add this line of code google.charts.Bar.convertOptions(
chart.draw(data, google.charts.Bar.convertOptions(options1));
The code will be like:
google.charts.load('current', {
'packages': ['bar']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Egypt', 'Morocco', 'Tunisia'],
['2012', 20.22, 40.52, 200],
['2013', 50.72, 150, 30.52]
]);
var data2 = google.visualization.arrayToDataTable([
['Year', 'Egypt', 'Morocco', 'Tunisia'],
['2012', 30, 100, 100],
['2013', 120, 80, 20]
]);
var data3 = google.visualization.arrayToDataTable([
['Year', 'Egypt', 'Morocco', 'Tunisia'],
['2012', 180, 200, 70],
['2013', 170, 60, 190]
]);
var options2 = {
chart: {
title: 'jordan -mk3',
subtitle: 'jordan -mk3 2012-2013',
backgroundColor: 'transparent'
},
bars: 'vertical',
vAxis: {
format: 'decimal'
},
chartArea: {
backgroundColor: 'transparent',
},
height: 400,
backgroundColor: {
fill: null
},
colors: ['#004389', '#AA2121', '#3C3C3C', '#3C3C3C', '#d95f02']
};
var options1 = {
chart: {
title: 'jordan -mk2',
subtitle: 'jordan -mk2 2012-2013',
backgroundColor: 'transparent'
},
bars: 'vertical',
vAxis: {
format: 'decimal'
},
chartArea: {
backgroundColor: 'transparent',
},
height: 400,
backgroundColor: {
fill: null
},
colors: ['#004389', '#AA2121', '#3C3C3C', '#3C3C3C', '#d95f02']
};
var chart2 = new google.charts.Bar(document.getElementById('chart_div2'));
chart2.draw(data2, google.charts.Bar.convertOptions(options2));
var options3 = {
chart: {
title: 'jordan -mk4',
subtitle: 'jordan -mk4 2012-2013',
backgroundColor: 'transparent'
},
bars: 'vertical',
vAxis: {
format: 'decimal'
},
chartArea: {
backgroundColor: 'transparent',
},
height: 400,
backgroundColor: {
fill: null
},
colors: ['#004389', '#AA2121', '#3C3C3C', '#3C3C3C', '#d95f02']
};
var chart3 = new google.charts.Bar(document.getElementById('chart_div3'));
chart3.draw(data3, google.charts.Bar.convertOptions(options3));
var options = {
chart: {
title: 'jordan -mk4',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'vertical',
vAxis: {
format: 'decimal'
},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3', '#7570b3', '#d95f02']
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options1));
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="chart_div2"></div>
<div id="chart_div3"></div>
I am using google charts api to display charts but, the last chart is not loading on the page, am I missing something.
Please provide me solution.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawcharts() {
var data1 = google.visualization.arrayToDataTable(
[
['Year', 'Derby', 'Bristol', 'Warrington', 'Indianapolis', 'Dahlewitz', 'Montreal'],
['2012', 143754.00 , 7607.59, 958.51, 6029.12 , 13605.12, 586.00],
['2013', 186065.32, 1674.50, 1823.93, 9574.24, 23935.14, 743.43],
['2014', 251238.53, 0, 0, 10154.41, 19926.63, 363.71],
['2015', 323134.57, 0, 0, 10400.66, 12002.84, 555.86],
['2016', 467058.18, 0, 0, 10529.27, 5844.90, 0] ,
['2017', 391209.43, 0, 0, 11072.43, 3603.65, 0] ,
['2018', 460257.40, 0, 0, 12031.69, 1833.52, 0] ,
['2019', 744114.34, 0, 0, 13012.83, 1517.89, 0] ,
['2020', 1484193.59, 0, 0, 14274.78, 1292.55, 0]
]);
var options1 = {
title:'Total CPU Hours Per Year By Site',
hAxis:{title:'Year', titleTextStyle:{color:'black'}},
vAxis:{title:'1000s CPU Hours', titleTextStyle:{color:'black'}}
};
var chartA = new google.visualization.AreaChart(document.getElementById('chart_div'));
chartA.draw(data1, options1);
}
google.setOnLoadCallback(drawcharts);
google.load("visualization", "1", {packages:["corechart"]});
</script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawcharts1() {
var data2 = google.visualization.arrayToDataTable(
[
['Year', 'Derby', 'Bristol', 'Warrington', 'RRC', 'RRD', 'Canada'],
['2012', 275.82, 1.145, 0, 2.71, 18.44, 0],
['2013', 398.29, 0.04, 0, 3.01, 29.38, 0],
['2014', 509.84, 0.04, 0 , 3.29, 26.05, 0],
['2015', 723.08, 0, 0, 3.54, 13.09, 0],
['2016', 951.38, 0, 0, 3.90, 7.59, 0] ,
['2017', 609.01, 0, 0, 4.32, 3.92, 0] ,
['2018', 1002.65, 0 , 0, 4.69, 1.70, 0] ,
['2019', 1133.86, 0, 0, 4.93, 1.31, 0] ,
['2020', 2127, 770 , 770, 5.31, 0.79, 0]
]);
var options2 = {
title:'Total CPU Hours Required For FE Code',
hAxis:{title:'Year', titleTextStyle:{color:'black'}},
vAxis:{title:'1000s CPU Hours', titleTextStyle:{color:'black'}}
};
var chartB = new google.visualization.AreaChart(document.getElementById('chart_divs'));
chartB.draw(data2, options2);
}
google.setOnLoadCallback(drawcharts1);
google.load("visualization", "1", {packages:["corechart"]});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- load Google AJAX API -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Day', 'Submitted', 'Published', 'Rejected','Created'],
['29-MAR-16', 100, 410, 230,40],
['30-MAR-16', 170, 346, 302,430],
['31-MAR-16', 60, 100, 130,40],
['1-APRIL-16', 302, 350, 520,40]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal', // Required for Material Bar Charts.
hAxis: {format: 'decimal'},
height: 500,
colors: ['#1b9e77', '#d95f02', '#7570b3', '#db7f0b']
};
var chart = new google.charts.Bar(document.getElementById('chart_div1'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart3);
function drawChart3() {
var data3 = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options3 = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart3 = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart3.draw(data3, options3);
}
</script>
</head>
<body>
<div id="chart_div1" style="width: 900px; height: 500px;"></div>
<p></p>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<p></p>
<div id="chart_divs" style="width: 900px; height: 500px;"></div>
<p></p>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
<p></p>
</body>
</html>
div id="curve_chart" style="width: 900px; height: 500px" for this line its showing blank but if I use the same script separately it will show me the chart. What is the reason?
I would recommend calling all your "drawcharts" functions from one callback passed to google.setOnLoadCallback
Here's a working jsfiddle.
https://jsfiddle.net/oakley808/z5j9u2sw/
google.load("visualization", "1", {
packages: ["corechart", "bar"]
});
google.setOnLoadCallback(function(){
drawcharts()
drawcharts1()
drawChart()
drawChart3()
})
function drawcharts() {
var data1 = google.visualization.arrayToDataTable(
[
['Year', 'Derby', 'Bristol', 'Warrington', 'Indianapolis', 'Dahlewitz', 'Montreal'],
['2012', 143754.00, 7607.59, 958.51, 6029.12, 13605.12, 586.00],
['2013', 186065.32, 1674.50, 1823.93, 9574.24, 23935.14, 743.43],
['2014', 251238.53, 0, 0, 10154.41, 19926.63, 363.71],
['2015', 323134.57, 0, 0, 10400.66, 12002.84, 555.86],
['2016', 467058.18, 0, 0, 10529.27, 5844.90, 0],
['2017', 391209.43, 0, 0, 11072.43, 3603.65, 0],
['2018', 460257.40, 0, 0, 12031.69, 1833.52, 0],
['2019', 744114.34, 0, 0, 13012.83, 1517.89, 0],
['2020', 1484193.59, 0, 0, 14274.78, 1292.55, 0]
]);
var options1 = {
title: 'Total CPU Hours Per Year By Site',
hAxis: {
title: 'Year',
titleTextStyle: {
color: 'black'
}
},
vAxis: {
title: '1000s CPU Hours',
titleTextStyle: {
color: 'black'
}
}
};
var chartA = new google.visualization.AreaChart(document.getElementById('chart_div'));
chartA.draw(data1, options1);
}
function drawcharts1() {
var data2 = google.visualization.arrayToDataTable(
[
['Year', 'Derby', 'Bristol', 'Warrington', 'RRC', 'RRD', 'Canada'],
['2012', 275.82, 1.145, 0, 2.71, 18.44, 0],
['2013', 398.29, 0.04, 0, 3.01, 29.38, 0],
['2014', 509.84, 0.04, 0, 3.29, 26.05, 0],
['2015', 723.08, 0, 0, 3.54, 13.09, 0],
['2016', 951.38, 0, 0, 3.90, 7.59, 0],
['2017', 609.01, 0, 0, 4.32, 3.92, 0],
['2018', 1002.65, 0, 0, 4.69, 1.70, 0],
['2019', 1133.86, 0, 0, 4.93, 1.31, 0],
['2020', 2127, 770, 770, 5.31, 0.79, 0]
]);
var options2 = {
title: 'Total CPU Hours Required For FE Code',
hAxis: {
title: 'Year',
titleTextStyle: {
color: 'black'
}
},
vAxis: {
title: '1000s CPU Hours',
titleTextStyle: {
color: 'black'
}
}
};
var chartB = new google.visualization.AreaChart(document.getElementById('chart_divs'));
chartB.draw(data2, options2);
}
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Day', 'Submitted', 'Published', 'Rejected', 'Created'],
['29-MAR-16', 100, 410, 230, 40],
['30-MAR-16', 170, 346, 302, 430],
['31-MAR-16', 60, 100, 130, 40],
['1-APRIL-16', 302, 350, 520, 40]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal', // Required for Material Bar Charts.
hAxis: {
format: 'decimal'
},
height: 500,
colors: ['#1b9e77', '#d95f02', '#7570b3', '#db7f0b']
};
var chart = new google.charts.Bar(document.getElementById('chart_div1'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
function drawChart3() {
var data3 = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options3 = {
title: 'Company Performance',
curveType: 'function',
legend: {
position: 'bottom'
}
};
var chart3 = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart3.draw(data3, options3);
}
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/