Related
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>
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 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>
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>
I'm trying to do a log scale plot in Google Charts(actually a semilogy plot, to be accurate) and have tried
vAxis: {
scaleType: 'log'
}
without success. I have seen also Google's example(https://jsfiddle.net/api/post/library/pure/), but haven't figured out where I am mistaken.
In order to reproduce my problem I've taken the simple Line Chart where i modified some entry values to look similar like values from f(x) = 1/x, like my actual data is distributed.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["linechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Index', 'Value'],
['1', 100000],
['2', 2170],
['3', 960],
['4', 560],
['5', 520],
['6', 500],
['7', 480],
['8', 460],
['9', 440],
['10', 430],
['11', 420],
['12', 410],
['13', 400],
['14', 395],
['15', 390],
['16', 388],
['17', 396],
['18', 387],
['19', 385],
['20', 384]
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance', vAxis: {scaleType: 'log'}});
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
My last option parameter vAxis: {scaleType: 'log'} is ignored. I ahve tried with both discrete and continuous data(1st column both as strings like above or numbers without the '') My plot looks like the one below
using the updated library (loader.js) seems to make a difference
<script src="https://www.gstatic.com/charts/loader.js"></script>
instead of...
<script src="https://www.google.com/jsapi"></script>
plus, from the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader (loader.js) from now on.
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Index', 'Value'],
['1', 100000],
['2', 2170],
['3', 960],
['4', 560],
['5', 520],
['6', 500],
['7', 480],
['8', 460],
['9', 440],
['10', 430],
['11', 420],
['12', 410],
['13', 400],
['14', 395],
['15', 390],
['16', 388],
['17', 396],
['18', 387],
['19', 385],
['20', 384]
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance', vAxis: {scaleType: 'log'}});
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
here is the same chart, without the option --> vAxis: {scaleType: 'log'}
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Index', 'Value'],
['1', 100000],
['2', 2170],
['3', 960],
['4', 560],
['5', 520],
['6', 500],
['7', 480],
['8', 460],
['9', 440],
['10', 430],
['11', 420],
['12', 410],
['13', 400],
['14', 395],
['15', 390],
['16', 388],
['17', 396],
['18', 387],
['19', 385],
['20', 384]
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>