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
Related
On the places of star I want to display some custom images like face emojis.I'm using the react-google-chart library here . So far, my code is as below
import { Chart } from "react-google-charts";
...
<Chart
width={'500px'}
height={'300px'}
chartType="AreaChart"
loader={<div>Loading Chart</div>}
data={[
['Year', 'Expenses', {'type': 'string', 'role': 'style'}],
['2013', 400, null],
['2014', 460, null],
['2015', 1120, 'point { size: 18; shape-type: star; fill-color: #a52714; }'],
['2016', 540, null],
]}
options={{
title: 'Company Performance',
hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 },
// For the legend to fit, we make the chart area smaller
chartArea: { width: '50%', height: '70%' },
// lineWidth: 25
pointSize: 20,
// series: {
// 0: { pointShape: { type: 'star', sides: 5, dent: 0.5 } }
// }
}}
// For tests
rootProps={{ 'data-testid': '1' }}
/>
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>
I'm trying to add a striped fill to my line chart, there seem to be an official solution for this https://developers.google.com/chart/image/docs/gallery/line_charts and they talk about chf.
However, I have no idea how to implement this, I've googled for it, and searched stackoverflow for a few hours now and can't seem to find a solution.
I need a striped fill like the even/odd css function.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(Process1);
function Process1() {
var data = google.visualization.arrayToDataTable([
['value1', 'value2', 'value3', 'value4'],
['10', 400, 380, 48],
['20', 400, 340, 260],
['30', 400, 410, 310],
['40', 400, 390, 380],
['50', 400, 345, 345],
['60', 400, 385, 370],
['70', 400, 430, 410],
['80', 400, null, null],
['90', 400, null, null],
['100', 400, null, null],
['110', 400, null, null],
['120', 400, null, null]
]);
var options = {
theme: 'material',
lineWidth: 3,
colors: ['#3D3D3D', '#4CDD37', '#2076F2'],
title: 'Orderinformation plan 1',
titleTextStyle: {fontName:'Lato', fontSize:'20'},
legend: {
position: 'right',
textStyle: {
fontName:'Lato', fontSize:'12'
},
},
hAxis: {
title: 'Time in minutes',
titleTextStyle: {fontName:'Lato', fontSize:'16', italic:false},
textStyle: {
fontName:'Lato', fontSize:'16'
},
},
vAxis: {
title: 'Temperature in celsius',
titleTextStyle: {fontName:'Lato', fontSize:'16', italic:false},
textStyle: {
fontName:'Lato', fontSize:'16'
},
viewWindowMode: 'explicit',
ticks: [25,50,100,150,200,250,300,350,400,460],
viewWindow: {
max:460,
min:25
},
gridlines: {
count: 10
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart_1'));
chart.draw(data, options);
}
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>