I was working on the combo chart (bar + scatter chart) of Google charts. I was not able to change the opacity of the data point and the fill area inside the bars. There was not much information provided in the documentation and I tried to change opacity using methods mentioned for other charts but nothing seemed to work.
Here is the link to the chart I was trying to work on- jsFiddle
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var sett = 'fill-color: #76A7FA; fill-opacity: 0.5; stroke-color: #76A7FA; stroke-width: 1;';
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Average', {
role: 'style'
}],
['2004/05', 450, 614.6, sett],
['2005/06', 288, 682, sett],
['2006/07', 397, 623, sett],
['2007/08', 215, 609.4, sett],
['2008/09', 366, 569.6, sett],
['2009/05', 450, 614.6, sett],
]);
var options = {
title: 'Monthly Coffee Production by Country',
vAxis: {
title: 'Cups'
},
hAxis: {
title: 'Month'
},
legend: 'none',
fillOpacity: 0.3,
pointShape: {
type: 'triangle',
rotation: 180
},
pointSize: 7,
series: {
0: {
type: 'bars',
areaOpacity: 0.3
},
1: {
type: 'scatter',
opacity: 0.5,
color: 'blue'
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
you can use a 'style' column role to change the opacity,
which it appears you have
however, the style role must follow each series column to which you want to apply the style
so to make the columns opaque, add the style following the second column,
see following working snippet...
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var sett = 'fill-color: #76A7FA; fill-opacity: 0.5; stroke-color: #76A7FA; stroke-width: 1;';
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', {role: 'style'}, 'Average', {role: 'style'}],
['2004/05', 450, sett, 614.6, sett],
['2005/06', 288, sett, 682, sett],
['2006/07', 397, sett, 623, sett],
['2007/08', 215, sett, 609.4, sett],
['2008/09', 366, sett, 569.6, sett],
['2009/05', 450, sett, 614.6, sett],
]);
var options = {
title: 'Monthly Coffee Production by Country',
vAxis: {
title: 'Cups'
},
hAxis: {
title: 'Month'
},
legend: 'none',
fillOpacity: 0.3,
pointShape: {
type: 'triangle',
rotation: 180
},
pointSize: 7,
series: {
0: {
type: 'bars',
areaOpacity: 0.3
},
1: {
type: 'scatter',
opacity: 0.5,
color: 'blue'
}
}
};
var chart = new google.visualization.ComboChart(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>
I was facing the same issue and found an easier way to control the opacity of bar charts in Google Charts.
I found an easy way of doing this and want to contribute my answer for those who come next!
We can control the opacity of individual series (including bars) by using dataOpacity:
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Average'],
['2004/05', 450, 614.6],
['2005/06', 288, 682],
['2006/07', 397, 623],
['2007/08', 215, 609.4],
['2008/09', 366, 569.6],
['2009/05', 450, 614.6],
]);
var options = {
title: 'Monthly Coffee Production by Country',
vAxis: {
title: 'Cups'
},
hAxis: {
title: 'Month'
},
legend: 'none',
pointShape: {
type: 'triangle',
rotation: 180
},
pointSize: 7,
series: {
0: {
type: 'bars',
dataOpacity: 0.3
},
1: {
type: 'scatter',
color: 'blue',
dataOpacity: 0.6
}
}
};
var chart = new google.visualization.ComboChart(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>
Related
I'm creating a dashboard that needs to show the current temp/humidity of a sensor on a chart and display it in relation to a defined static polygon. The polygon represents the acceptable temp/humidity area. I do not need to show previous values, just current temp/humidity point.
I'm trying to create something like this:
What google chart can accommodate something like this? Is there a better library that can handle this? I can display the data with a scatter chart but I'm not sure how to approach the polygon:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Humidity', 'Temp'],
[ 51, 68],
]);
var options = {
title: 'Temp Humidity ',
hAxis: {title: 'Relative Humidity', minValue: 45, maxValue: 65},
vAxis: {title: 'Temperature (F)', minValue: 64, maxValue: 80},
legend: 'none'
};
var chart = new google.visualization.ScatterChart(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: 900px; height: 500px;"></div>
Fiddle
you can use the ComboChart, with a line series for the polygon.
add a third column for the polygon's y-axis values.
then add rows for each corner of the poylgon,
with one additional row to connect the polygon back to the first corner.
use null for the column values of the "other" series.
var data = google.visualization.arrayToDataTable([
['Humidity', 'Temp', 'poly'],
// scatter point
[51, 68, null],
// polygon
[54, null, 70],
[58, null, 70],
[58, null, 72],
[54, null, 72],
[54, null, 70],
]);
in the options, set the series options as follows...
var options = {
title: 'Temp Humidity ',
hAxis: {title: 'Relative Humidity', minValue: 45, maxValue: 65},
vAxis: {title: 'Temperature (F)', minValue: 64, maxValue: 80},
legend: 'none',
seriesType: 'scatter',
series: {
1: {
color: '#000000',
type: 'line'
}
}
};
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function drawChart() {
var data = google.visualization.arrayToDataTable([
['Humidity', 'Temp', 'poly'],
// scatter point
[51, 68, null],
// polygon
[54, null, 70],
[58, null, 70],
[58, null, 72],
[54, null, 72],
[54, null, 70],
]);
var options = {
title: 'Temp Humidity ',
hAxis: {title: 'Relative Humidity', minValue: 45, maxValue: 65},
vAxis: {title: 'Temperature (F)', minValue: 64, maxValue: 80},
legend: 'none',
seriesType: 'scatter',
series: {
1: {
color: '#000000',
type: 'line'
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I have prepared google 'bar' chart as below its working properly.how can i change direction of bar form vertical to horizontal ?
I tried to change direction of chart Using vAxis: {direction:-1} but not working.
I tried to get solution from google chart sites but i cant found any other solution for horizontal bar chart with Stacked & Group. Is there any other way to change direction of Google 'bar' Chart ?
<html>
<title>Web Page Design</title>
<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],
['2017', 1030, 540, 350]
]);
var options = {
isStacked: true,pointSize: 15,
vAxis: {
viewWindow: {
min: 0,
}
},
legend: {
position:'bottom',
textStyle: {
bold: false,
fontSize: 12,
}
},
is3D: true,
vAxes: {
0:{
title: 'value in lac'
},
1: {
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'transparent'
}
},
2: {
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'transparent'
}
},
},
series: {
0: {
targetAxisIndex: 0,
color:'#2A6DDA'
},
1: {
targetAxisIndex: 1,
color:'#FF5733'
},
2: {
targetAxisIndex: 1,
color:'#FFC300'
},
3: {
targetAxisIndex: 1,
color:'#D3A4FA'
},
},
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="columnchart_material" runat="server" style="width: 600px; height: 500px;">
</div>
</body>
</html>
Here is how Google charts does it on their examples page
What you need is to use 'corecharts' instead of 'bars', then change the call to google.visualization.BarChart() and you'll get the horizontal bars.
<html>
<title>Web Page Design</title>
<head>
<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', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350],
['2017', 1030, 540, 350]
]);
var options = {
isStacked: true,
pointSize: 15,
vAxis: {
viewWindow: {
min: 0,
}
},
legend: {
position: 'bottom',
textStyle: {
bold: false,
fontSize: 12,
}
},
is3D: true,
vAxes: {
0: {
title: 'value in lac'
},
1: {
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'transparent'
}
},
2: {
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'transparent'
}
},
},
series: {
0: {
targetAxisIndex: 0,
color: '#2A6DDA'
},
1: {
targetAxisIndex: 1,
color: '#FF5733'
},
2: {
targetAxisIndex: 1,
color: '#FFC300'
},
3: {
targetAxisIndex: 1,
color: '#D3A4FA'
},
},
};
var chart = new google.visualization.BarChart(document.getElementById("columnchart_material"));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="columnchart_material" runat="server" style="width: 600px; height: 500px;">
</div>
</body>
</html>
Find the sample issue in the screenshot below. When we load the graph UI using google charts, the legends data are coming but not displayed properly. The frequency of this issue is less in laptops but frequency is high in desktops. Please guide.
this problem is the result of drawing the chart in a hidden container
to demonstrate, see following working snippet,
the chart remains hidden while it is drawn,
then shown when the chart's 'ready' event is fired
the result is similar to the image posted
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var data = google.visualization.arrayToDataTable([
[ {label: 'Year', id: 'year', type: 'date'},
{label: 'Annual Sales', id: 'Sales', type: 'number'},
{label: 'Annual Expenses', id: 'Expenses', type: 'number'},
{label: 'Annual Profit', id: 'Profit', type: 'number'}],
[{v:new Date('2014'), f:'2014'}, 0, 400, 200],
[{v:new Date('2014'), f:'2014'}, 1000, 0, 0],
[{v:new Date('2015'), f:'2015'}, 0, 460, 250],
[{v:new Date('2015'), f:'2015'}, 1170, 0, 0],
[{v:new Date('2016'), f:'2016'}, 0, 1120, 300],
[{v:new Date('2016'), f:'2016'}, 600, 0, 0],
[{v:new Date('2017'), f:'2017'}, 0, 540, 350],
[{v:new Date('2017'), f:'2017'}, 1030, 0, 0]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal',
hAxis: {
format: 'decimal'
},
vAxis: {
format: 'yyyy'
},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3'],
isStacked: true,
bar: {
groupWidth: '90%'
}
};
var container = document.getElementById('chart_div');
var chart = new google.charts.Bar(container);
google.visualization.events.addListener(chart, 'ready', function () {
$(container).removeClass('hidden');
});
chart.draw(data, google.charts.Bar.convertOptions(options));
});
.hidden {
display: none;
visibility: hidden;
}
<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 class="hidden" id="chart_div"></div>
to correct this issue,
make sure the chart's container is visible,
before drawing for the first time
see following working snippet...
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var data = google.visualization.arrayToDataTable([
[ {label: 'Year', id: 'year', type: 'date'},
{label: 'Annual Sales', id: 'Sales', type: 'number'},
{label: 'Annual Expenses', id: 'Expenses', type: 'number'},
{label: 'Annual Profit', id: 'Profit', type: 'number'}],
[{v:new Date('2014'), f:'2014'}, 0, 400, 200],
[{v:new Date('2014'), f:'2014'}, 1000, 0, 0],
[{v:new Date('2015'), f:'2015'}, 0, 460, 250],
[{v:new Date('2015'), f:'2015'}, 1170, 0, 0],
[{v:new Date('2016'), f:'2016'}, 0, 1120, 300],
[{v:new Date('2016'), f:'2016'}, 600, 0, 0],
[{v:new Date('2017'), f:'2017'}, 0, 540, 350],
[{v:new Date('2017'), f:'2017'}, 1030, 0, 0]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal',
hAxis: {
format: 'decimal'
},
vAxis: {
format: 'yyyy'
},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3'],
isStacked: true,
bar: {
groupWidth: '90%'
}
};
var container = document.getElementById('chart_div');
var chart = new google.charts.Bar(container);
chart.draw(data, google.charts.Bar.convertOptions(options));
});
<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>
choose to use "use row 1 as headers" from the edit chart "Data" tab
I am using google chart. I want to slate text on x-axis and should be minimum value is 0 in y-axis. After some google i put some snippet not it working.
Here is my code:-
var data = google.visualization.arrayToDataTable(loadDaysLeadGraphData);
var options = {
hAxis: {
title: "Month",
textPosition: 'out',
slantedText: true,
slantedTextAngle: 90
},
vAxis: {
title: 'Revenue',
minValue: 0,
viewWindow: { min: 0 },
format: '0',
},
height: 260,
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};
var chart = new google.charts.Bar(document.getElementById('days-leads'));
chart.draw(data, options);
there are many options that simply do not work with material charts, including...
{hAxis,vAxis,hAxes.*,vAxes.*}.slantedText
{hAxis,vAxis,hAxes.*,vAxes.*}.slantedTextAngle
{hAxis,vAxis,hAxes.*,vAxes.*}.minValue
see --> Tracking Issue for Material Chart Feature Parity #2143
material chart --> google.charts.Bar -- packages:['bar']
core chart --> google.visualization.ColumnChart -- packages:['corechart']
however, for core charts, there is an option for...
theme: 'material'
see following working snippet...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var loadDaysLeadGraphData = [
['Year', 'Value'],
['2005', 58],
['2006', 63],
['2007', 66],
['2008', 66],
['2009', 81],
['2010', 85],
['2011', 86],
['2012', 86],
['2013', 89],
['2014', 90],
['2015', 90]
];
var data = google.visualization.arrayToDataTable(loadDaysLeadGraphData);
var options = {
hAxis: {
title: "Month",
textPosition: 'out',
slantedText: true,
slantedTextAngle: 90
},
vAxis: {
title: 'Revenue',
minValue: 0,
viewWindow: { min: 0 },
format: '0',
},
height: 260,
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
theme: 'material'
};
var chart = new google.visualization.ColumnChart(document.getElementById('days-leads'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="days-leads"></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>