Show the X-axis title in Google Chart - javascript

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>

Related

Google Charts: Hiding vertical bars on points

I have the following code:
<!DOCTYPE html>
<html>
<head>
<title>My Line Chart</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', {role: 'annotation'}, 'Expenses', {role: 'annotation'}],
['2014', 1000, '', 400, ''],
['2015', 1170, '', 460, ''],
['2016', 660, '', 1120, ''],
['2017', 1030, '$1030', 540, '$540']
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' },
pointSize:0,
annotations: {
alwaysOutside: false,
textStyle: {
fontSize: 12,
color: '#000',
auraColor: 'none'
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Which displays the following chart
Do you see those vertical gray lines on points? How can I hide them?

for the missing annotation values, use null instead of a blank string ''
['2014', 1000, null, 400, null],
we can also control the color of the vertical line pointing to the annotation,
otherwise known as the stem...
stem: {
color: 'transparent'
},
add above option within the annotations option...
annotations: {
alwaysOutside: false,
stem: {
color: 'transparent'
},
textStyle: {
fontSize: 12,
color: '#000',
auraColor: 'none'
}
}
see following working snippet...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', {role: 'annotation'}, 'Expenses', {role: 'annotation'}],
['2014', 1000, null, 400, null],
['2015', 1170, null, 460, null],
['2016', 660, null, 1120, null],
['2017', 1030, '$1030', 540, '$540']
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' },
pointSize:0,
annotations: {
alwaysOutside: false,
stem: {
color: 'transparent'
},
textStyle: {
fontSize: 12,
color: '#000',
auraColor: 'none'
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

How to put 2 google charts on one page

I learn how to create bar and pie chart from https://developers.google.com/chart/interactive/docs/gallery/columnchart and
https://developers.google.com/chart/interactive/docs/gallery/piechart.
But I just couldn't get two charts on the same page.My code is as follow:
<html>
<head>
<!--pie chart-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new
google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<!--bar chart-->
<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(drawBar);
function drawBar() {
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 = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
};
var chart = new
google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<br>
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>
Can someone give me some suggestion?
Many thanks.

first, only need to reference loader.js one time
and only need one load statement
which can load as many 'packages' as needed
once the callback fires, you can start drawing
see following working snippet...
google.charts.load('current', {
callback: function () {
drawChart();
drawBar();
},
packages: ['bar', 'corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
function drawBar() {
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 = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<br>
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>

How can I change X metric in Google Chart?

I use Visualization: Area Chart in my example.
The following code presents the function that does drawing chart:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
You can see, that axis X has values of date in years.
How can I chane this metric for example on months/days?
Assume that I have selected list with values: day/month/years and by selecting option I get is drawen chart correcponding selected value.
Is it easy in Google Chart?

use the data view class and the setColumns method to switch the x-axis column
see following working snippet...
google.charts.load('current', {
callback: function () {
document.getElementById('view-column').addEventListener('change', drawChart, false);
drawChart();
},
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Month', 'Day', 'Sales', 'Expenses'],
[2013, 9, 5, 1000, 400],
[2014, 10, 6, 1170, 460],
[2015, 11, 7, 660, 1120],
[2016, 12, 8, 1030, 540]
]);
var dimension = document.getElementById('view-column');
var view = new google.visualization.DataView(data);
view.setColumns([
parseInt(dimension.options[dimension.selectedIndex].value),
3, 4
]);
var options = {
title: 'Company Performance',
hAxis: {
title: dimension.options[dimension.selectedIndex].text,
titleTextStyle: {
color: '#333'
}
},
vAxis: {
minValue: 0
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<select id="view-column">
<option value="0" selected>Year</option>
<option value="1">Month</option>
<option value="2">Day</option>
</select>
<div id="chart_div"></div>

how can i edit google charts view in googlechart api?

this is html/javascript for this bar
<html>
<head>
<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([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>
how can i edit this chart?i want to add some text as shown in screenshot in this chart.is there any way to edit this??

Not able to load all google charts on single web page; am I missing something?

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);
}

Categories