This is the code which I tried to show the chart with the help of Google chart.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<br/>
<script>
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',
},
bars: 'Vertical', // Required for Material Bar Charts.
hAxis: {format: 'decimal'},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3']
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
var btns = document.getElementById('btn-group');
btns.onclick = function (e) {
if (e.target.tagName === 'BUTTON') {
options.hAxis.format = e.target.id === 'none' ? '' : e.target.id;
chart.draw(data, google.charts.Bar.convertOptions(options));
}
}
}
</script>
This is the code I tried to show the bar chart. I just want to show dollar ($) sign in Y axis. Please help in this.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<br/>
<script>
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',
},
bars: 'Vertical', // Required for Material Bar Charts.
vAxis: {format: 'currency'},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3']
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
var btns = document.getElementById('btn-group');
btns.onclick = function (e) {
if (e.target.tagName === 'BUTTON') {
options.hAxis.format = e.target.id === 'none' ? '' : e.target.id;
chart.draw(data, google.charts.Bar.convertOptions(options));
}
}
}
</script>
https://jsfiddle.net/wdf6wvpt/
Related
Suppose I have a <select> drop down menu here:
<select id="menu">
<option>livejournal</option>
<option>librarybooks</option>
<option>sunspots</option>
</select>
And I tried to link it to a Google Chart API so when I click the options in the menu it will draw the correspondent charts(to replace the existing one) on the page.
I uses object.onchange to implement this, but seems chart.draw won't able to draw a chart, what else am I missing here?
//Dropdown Menu Selection
document.getElementById("menu").onchange = function () {
//livejournal
if(this.selectedIndex == 0){
alert("Default");
}
//librarybooks
if(this.selectedIndex == 1){
alert("librarybooks");
var data = google.visualization.arrayToDataTable([
['Digit', 'Benford', 'Librarybooks'],
['1', 1000, 200],
['2', 1170, 760],
['3', 660, 100],
['4', 1030, 300],
['5', 1030, 140],
['6', 1030, 640],
['7', 1030, 240],
['8', 1030, 440],
['9', 1030, 840]
]);;
chart.draw(data, google.charts.Bar.convertOptions(options));
}
//sunspots
if(this.selectedIndex == 2){
alert("Sunspots");
}
}
And this is the original API I am using:
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, google.charts.Bar.convertOptions(options));
}
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<div id="columnchart_material" style="width: 800px; height: 500px;"></div>
</body>
</html>
Link to the Google Charts API
don't see where chart is created --> var chart = new google.charts.Bar...
or the definition for options --> var options = {...
recommend using a switch statement to determine the value of the menu
see following working snippet...
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var dataDefault = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var dataLibraryBooks = google.visualization.arrayToDataTable([
['Digit', 'Benford', 'Librarybooks'],
['1', 1000, 200],
['2', 1170, 760],
['3', 660, 100],
['4', 1030, 300],
['5', 1030, 140],
['6', 1030, 640],
['7', 1030, 240],
['8', 1030, 440],
['9', 1030, 840]
]);;
var dataSunspots = google.visualization.arrayToDataTable([
['x', 'y'],
['A', 10],
['B', 30],
['C', 50],
['D', 70],
['E', 90]
]);
var options = {
chart: {
title: 'Bar Chart'
}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
var menu = document.getElementById('menu');
menu.addEventListener('change', drawChart, false);
drawChart();
function drawChart() {
switch (menu.selectedIndex) {
case 1:
console.log('librarybooks');
chart.draw(dataLibraryBooks, google.charts.Bar.convertOptions(options));
break;
case 2:
console.log('Sunspots');
chart.draw(dataSunspots, google.charts.Bar.convertOptions(options));
break;
default:
console.log('default');
chart.draw(dataDefault, google.charts.Bar.convertOptions(options));
}
}
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<select id="menu">
<option selected>livejournal</option>
<option>librarybooks</option>
<option>sunspots</option>
</select>
<div id="chart_div"></div>
You have not called: google.charts.setOnLoadCallback(drawChart);.
<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']});
function drawgraph(index){
if(index==0){
document.getElementById('livejournal');
google.charts.setOnLoadCallback(drawChart('livejournal'));
}
if(index==1){
google.charts.setOnLoadCallback(drawChart('librarybooks'));
}
if(index==2){
google.charts.setOnLoadCallback(drawChart('sunspots'));
}
}
function drawChart(divId) {
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',
},
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById(divId));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<select id="menu" onchange=drawgraph(this.selectedIndex)>
<option>livejournal</option>
<option>librarybooks</option>
<option>sunspots</option>
</select>
<div id="livejournal" style="width: 900px; height: 500px;"></div>
<div id="librarybooks" style="width: 900px; height: 500px;"></div>
<div id="sunspots" style="width: 900px; height: 500px;"></div>
</body>
</html>
I need to use vAxis {logScale : true ,...} in the options of a AreaChart of Google chart package but when i add logScale : true to its options, It causes a problem in the animation scan.
When i remove it, the animation works nice.
Is there any way to show animation on startup by a Google chart when vAxis.logScale is true?
Demo
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
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,
logScale:true // << It cause animation problem
},
animation:{
startup:true,
duration: 1000,
easing: 'out',
},
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
there are some known issues when using animation.startup
this appears to be another...
to get animation to work with logScale,
remove animation.startup
use a blank data table to draw the chart initially
and a one time 'ready' event listener,
to immediately draw the chart again with the correct data...
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['', 0, 0],
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {
minValue: 0,
logScale: true
},
animation:{
duration: 1000,
easing: 'out'
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
data.removeRow(0);
data.addRows([
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
chart.draw(data, options);
});
chart.draw(data, options);
$(window).resize(function() {
chart.draw(data, options);
});
},
packages: ['corechart']
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I made a fix for this bug myself.
Using it is so simple. Just add the following fix function to your script and call it before first chart.draw(...).
The fix function:
function fixLogScaleAnimation(chart,data, opts){
if(opts.vAxis.logScale){
opts.vAxis.logScale=false;
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
opts.vAxis.logScale=true;
chart.draw(data, opts);
});
}
}
Use:
chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
fixLogScaleAnimation(chart,data, options); // << Call the fix function here
chart.draw(data, options);
Demo:
function fixLogScaleAnimation(chart,data, opts){
if(opts.vAxis.logScale){
opts.vAxis.logScale=false;
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
opts.vAxis.logScale=true;
chart.draw(data, opts);
});
}
}
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
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,
logScale:true // << It cause animation problem
},
animation:{
startup:true,
duration: 1000,
easing: 'out',
},
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
fixLogScaleAnimation(chart,data, options);
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
I think my way is a better (simple and clean) solution to this problem and i made it before anyone write an answer for it here but i mark #WhiteHat's answer as accepted answer because his solution works well too and he wrote his answer here before me. ;)
The solution to this problem is changing the configuration option of your vAxis to:
vAxis: {
minValue: 0,
0: {logScale: true}
}
Making the first axis on the graph scaled as log.
I have a Google Bar Chart using the Material design. I am trying to change its default white background color to match my page, but the color changes only the outer margin of the chart. The inner area where the chart data is stays white. I have used plain backgroundColor and the fill:... identifiers in my options and both give me the same result. Here's my code:
var barchart_options = {
width: 600,
height:350,
backgroundColor : '#CFC3F8',
.......
When trying it with the fill identifier, I did this:
backgroundColor : {fill:'#CFC3F8'},
Here's a screenshot:
there is also an option for chartArea.backgroundColor
var options = {
backgroundColor: '#CFC3F8',
chartArea: {
backgroundColor: '#CFC3F8'
}
};
and only the color is needed
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['bar']
});
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 = {
backgroundColor: 'magenta',
chartArea: {
backgroundColor: 'cyan'
}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I am trying to access fill property of a series in a stacked area (Google charts). I want the bottom series of the stacked chart to become transparent as shown in the JSFiddle code.
Can one please assist in this please? Your help is very much appreciated.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="row">
<!-- Div that will hold the pie chart-->
<div id="chart_div"></div>
</div>
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
isStacked: true,
title: 'Company Performance',
hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 },
series:
{
0: { id: 'ss223', type: 'area', backgroundColor: { fill: 'black' } },
1: { type: 'area', backgroundColor: { fill: 'transparent' }}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
just replace...
backgroundColor: { fill: 'transparent' }
with...
color: 'transparent'
the series will be numbered, starting with zero on the bottom
see following working snippet...
note: if you want to make the area solid black, not just the border,
add this to your options...
areaOpacity: 1
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Line 1', 'Line 2'],
['2013', 1000, 400, 200, 400],
['2014', 1170, 460, 200, 400],
['2015', 660, 1120, 200, 400],
['2016', 1030, 540, 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>
I want to accomplish google stacked area chart.
Here is the js fiddle:
Js Fiddle
I also tried adding the options for stacked area:
var options_fullStacked = {
isStacked: 'relative',
height: 300,
legend: {position: 'top', maxLines: 3},
vAxis: {
minValue: 0,
ticks: [0, .3, .6, .9, 1]
}
};
It is available in the documentation for google charts:stacked area
I want to display it as shown in this figure:
Please ignore everything else in this figure except the stacked area chart displayed in between the line chart and the map
seems to work here, is there more you can share?
see following examples...
isStacked: true
google.charts.load('current', {
callback: function () {
new google.visualization.AreaChart(document.getElementById('chart_div')).draw(
google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]),
{
title: 'Company Performance',
isStacked: true,
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
}
);
},
packages:['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
isStacked: false
google.charts.load('current', {
callback: function () {
new google.visualization.AreaChart(document.getElementById('chart_div')).draw(
google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]),
{
title: 'Company Performance',
isStacked: false,
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
}
);
},
packages:['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>