I'm trying to add tick marks to my Google line chart, but when I input ticks: [0, 0.5, 1.0, 1.5, 2.0] on my vertical axis and ticks: [400, 450, 500, 550, 600, 650] on my horizontal axis, they keep appearing more as gridlines than actual tick marks.
For the Google Sheets line chart I created, MAJOR and MINOR ticks are checkboxed. [Major Count: Auto, Minor Count: 1]
For the MAJOR ticks:
Positions on the HORIZONTAL AXIS would be at [400, 450, 500, 550, 600, 650]
Positions on the VERTICAL AXIS would be at [0, 0.5, 1.0, 1.5, 2.0]
Ticks Position: Cross (so it would cross the baseline, rather than being inside or outside of it)
Ticks Length: 12px
Line Thickness: 1px
Line Color: Black
For the MINOR ticks:
Positions on the HORIZONTAL AXIS would be at [425, 475, 525, 575, 625]
Positions on the VERTICAL AXIS would be at [0.25, 0.75, 1.25, 1.75]
Ticks Position: Cross
Ticks Length: 6px
Line Thickness: 1px
Line Color: Black
Here is my code:
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawLineColors);
function drawLineColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Absorbance');
data.addRows([
[380, 0.12],
[390, 0.098],
[400, 0.088],
[410, 0.12],
[420, 0.292],
[430, 0.302],
[440, 0.444],
[450, 0.636],
[460, 0.774],
[470, 0.998],
[480, 1.428],
[490, 1.862],
[500, 1.954],
[510, 1.45],
[520, 0.774],
[530, 0.364],
[540, 0.16],
[550, 0.134],
[560, 0.074],
[570, 0.06],
[580, 0.076],
[590, 0.046],
[600, 0.0004],
[610, 0.008],
[620, 0.006],
[630, 0.0006],
[640, 0.016],
[650, 0.002],
[660, 0.056],
]);
var options = {
title: 'Analytical Spectrum',
titleTextStyle: {
fontName: 'Courier Prime',
fontSize: 30,
bold: true,
color: 'black' },
height: 500,
width: 900,
hAxis:
{
title: 'Wavelength (nm)',
titleTextStyle: {
fontName: 'Courier Prime',
fontSize: 18,
bold: true,
italic: false },
textStyle: {
fontName: 'Courier Prime',
fontSize: 16,
bold: true,
color: 'black'
},
gridlines: {count: '0'},
minTextSpacing: '1',
baseline: '380',
ticks: [400, 450, 500, 550, 600, 650]
},
vAxis:
{
title: 'Absorbance (AU)',
titleTextStyle: {
fontName: 'Courier Prime',
fontSize: 18,
bold: true,
italic: false },
textStyle: {
fontName: 'Courier Prime',
fontSize: 16,
bold: true,
color: 'black'
},
gridlines: {count: '0'},
baseline: '0',
ticks: [0, 0.5, 1.0, 1.5, 2.0],
},
legend: 'none',
lineWidth: 5,
colors: ['#0000ff']
};
var chart = new google.visualization.LineChart(document.getElementById('AnalyticalSpectrum'));
chart.draw(data, options);
}
I've been using this Google Line Chart overview under "Configuration Options" to check how I can change my tick marks, but I'm not yet seeing anything that explains why the tick marks are showing up as gridlines, or how to change that: [https://developers.google.com/chart/interactive/docs/gallery/linechart].
Related
I have a stacked chart which is responsive for most screen sizes based on the solution for responsiveness provided here: Google Charts - Responsive Issue - Dynamically Resize
The problem is that despite none of the data values being higher than 5000, when viewed on mobile the scale goes up to 10,000 and the entire chart is rendered illegible. How can i scale the chart correctly for mobile?
JSFIDDLE https://jsfiddle.net/385rzhsg
HTML
<div id="chart"><div id="soc_chart"></div></div>
CSS
#chart {
border: 1px solid #AAA;
min-height: 1000px;
}
JAVASCRIPT
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStacked);
function drawStacked() {
var data = google.visualization.arrayToDataTable([
['SOC', 'GEEKBENCH 5 SINGLE', 'GEEKBENCH 5 MULTI'],
['SNAPDRAGON 870', 914, 3161],
['MEDIATEK DIMENSITY 900 (MT6877)', 731, 2203],
['SNAPDRAGON 845', 504, 2028],
['MEDIATEK DIMENSITY 700 (MT6833V)', 544, 1695],
['MEDIATEK G95', 501, 1599],
['UNISOC TIGER T618', 392, 1441],
['UNISOC TIGER T310', 360, 708],
['MEDIATEK MT8176', 314, 644],
['MEDIATEK HELIO P60 (MT6771)', 288, 1272],
['ROCKCHIP RK3399', 269, 615],
['BROADCOM BCM2711', 234, 672],
['ROCKCHIP RK3326', 86, 272],
['MEDIATEK MT6580A', 69, 227],
['ROCKCHIP RK3288', 10, 20]
]);
var options = {
chartArea: {'width': 'auto', 'height': '90%'},
legend:
{'position':'top',
textStyle: {color: 'black', fontName: 'Lato', fontSize: 14, bold: true, italic: false}},
height: 1000,
isStacked: true,
hAxis:
{title: 'GEEKBENCH 5 SCORE',
textStyle: {color: 'black', fontName: 'Lato', fontSize: 12, bold: true, italic: false},
titleTextStyle: {color: '#940000', fontName: 'Lato', bold: true, italic: false}},
series: {
0:{color:'#F75200'},
1:{color:'#940000'}},
vAxis:
{title: 'SOC NAME',
textStyle: {color: 'black', fontName: 'Lato', fontSize: 12, bold: true, italic: false},
titleTextStyle: {color: '#940000', fontName: 'Lato', bold: true, italic: false}}
};
var chart = new google.visualization.BarChart(document.getElementById('soc_chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
window.addEventListener('resize', drawStacked, false);
}
for starters, let's take a look at the options for the chart.
var chart = new google.visualization.BarChart(document.getElementById('soc_chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
the convertOptions method is used to convert options for classic charts to material charts.
but the chart being drawn is a classic chart, so there is no need to use convertOptions.
classic chart: google.visualization.BarChart
material chart: google.charts.Bar
try removing the method...
var chart = new google.visualization.BarChart(document.getElementById('soc_chart'));
chart.draw(data, options);
also, the 'bar' package is for loading material charts,
so it isn't needed either.
google.charts.load('current', {packages: ['corechart', 'bar']});
change to...
google.charts.load('current', {packages: ['corechart']});
if after these changes, the axis continues to extend beyond the max value,
you can manually set the axis range.
we can find the max value of the row stacks, then round up to the nearest 1000.
var maxStack = null;
for (var i = 0; i < data.getNumberOfRows(); i++) {
var rowStack = data.getValue(i, 1) + data.getValue(i, 2);
maxStack = maxStack || rowStack;
maxStack = Math.max(maxStack, rowStack);
}
var maxRound = Math.ceil(maxStack / 1000) * 1000;
then use that value to set the max value of the axis.
hAxis: {
title: 'GEEKBENCH 5 SCORE',
textStyle: {color: 'black', fontName: 'Lato', fontSize: 12, bold: true, italic: false},
titleTextStyle: {color: '#940000', fontName: 'Lato', bold: true, italic: false},
viewWindow: {
min: 0,
max: maxRound // set max value of axis
}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['SOC', 'GEEKBENCH 5 SINGLE', 'GEEKBENCH 5 MULTI'],
['SNAPDRAGON 870', 914, 3161],
['MEDIATEK DIMENSITY 900 (MT6877)', 731, 2203],
['SNAPDRAGON 845', 504, 2028],
['MEDIATEK DIMENSITY 700 (MT6833V)', 544, 1695],
['MEDIATEK G95', 501, 1599],
['UNISOC TIGER T618', 392, 1441],
['UNISOC TIGER T310', 360, 708],
['MEDIATEK MT8176', 314, 644],
['MEDIATEK HELIO P60 (MT6771)', 288, 1272],
['ROCKCHIP RK3399', 269, 615],
['BROADCOM BCM2711', 234, 672],
['ROCKCHIP RK3326', 86, 272],
['MEDIATEK MT6580A', 69, 227],
['ROCKCHIP RK3288', 10, 20]
]);
var maxStack = null;
for (var i = 0; i < data.getNumberOfRows(); i++) {
var rowStack = data.getValue(i, 1) + data.getValue(i, 2);
maxStack = maxStack || rowStack;
maxStack = Math.max(maxStack, rowStack);
}
var maxRound = Math.ceil(maxStack / 1000) * 1000;
var options = {
chartArea: {'width': 'auto', 'height': '90%'},
legend: {
position: 'top',
textStyle: {color: 'black', fontName: 'Lato', fontSize: 14, bold: true, italic: false}
},
height: 1000,
isStacked: true,
hAxis: {
title: 'GEEKBENCH 5 SCORE',
textStyle: {color: 'black', fontName: 'Lato', fontSize: 12, bold: true, italic: false},
titleTextStyle: {color: '#940000', fontName: 'Lato', bold: true, italic: false},
viewWindow: {
min: 0,
max: maxRound
}
},
series: {
0:{color:'#F75200'},
1:{color:'#940000'}
},
vAxis: {
title: 'SOC NAME',
textStyle: {color: 'black', fontName: 'Lato', fontSize: 12, bold: true, italic: false},
titleTextStyle: {color: '#940000', fontName: 'Lato', bold: true, italic: false}
}
};
var chart = new google.visualization.BarChart(document.getElementById('soc_chart'));
chart.draw(data, options);
window.addEventListener('resize', function () {
chart.draw(data, options);
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="soc_chart"></div>
I have a combo chart containing area, bars and line graphs. I'd like the area and line charts to align maximally to the left and right side. For bars chart it's not required. Unfortunately I'm unable to align the graphs properly. I went through the documentation and couldn't find a solution to my problem.
Current chart:
Expected chart:
Here is the GoogleChartInterface object of the chart (I'm adding dataTable and ticks dynamically):
{
chartType: 'ComboChart',
dataTable: [],
options: {
focusTarget: 'category',
animation: {
startup: true,
easing: 'out',
duration: 500,
},
height: '160',
chartArea: {
width: '90%',
height: '79%',
},
vAxes: {
0: {
titlePosition: 'none',
textStyle: {
color: '#febd02',
bold: true,
fontSize: 13,
},
format: '#',
gridlines: {
color: '#eaeaea',
count: '5',
},
interpolateNulls: true,
},
1: {
titlePosition: 'none',
format: '#',
gridlines: {
color: 'transparent'
},
interpolateNulls: true,
},
2: {
groupWidth: '100%',
titlePosition: 'none',
textStyle: {
color: '#0284ff',
bold: true,
fontSize: 13,
},
format: 'decimal',
gridlines: {
color: 'transparent'
},
},
},
hAxis: {
textStyle: {
color: '#393939',
bold: true,
fontSize: 13,
},
format: 'EEEE',
gridlines: {
count: 0,
color: 'transparent'
},
ticks: [],
},
series: {
0: {
targetAxisIndex: 0,
type: 'area',
},
1: {
type: 'line'
},
2: {
targetAxisIndex: 2,
type: 'bars',
dataOpacity: 0.5,
},
},
colors: [
'#febd02',
'#a5a5a5',
'#0284ff',
],
bar: {
groupWidth: '35'
},
legend: {
position: 'none'
},
},
};
in order to stretch the area and line series to the edges of the chart,
we must first use a data type that will render a continuous x-axis.
in this case, we will use date time.
next, we use option hAxis.viewWindow to control where the series start and end.
viewWindow has two properties, min & max.
the values of min & max should match the data type of the x-axis.
in this case, we set the values to the dates where the series should begin and end.
hAxis: {
viewWindow: {
min: new Date(2020, 10, 13),
max: new Date(2020, 10, 19)
}
}
this will stretch the series to the edges of the chart.
see following working snippet for an example...
google.charts.load('current', {
packages: ['controls', 'corechart']
}).then(function() {
var data = google.visualization.arrayToDataTable([
['Date', 'y0', 'y1', 'y2'],
[new Date(2020, 10, 13), 100, 50, 25],
[new Date(2020, 10, 14), 110, 45, 5],
[new Date(2020, 10, 15), 90, 40, 60],
[new Date(2020, 10, 16), 80, 30, 10],
[new Date(2020, 10, 17), 70, 20, 0],
[new Date(2020, 10, 18), 60, 10, 0],
[new Date(2020, 10, 19), 50, 5, 0]
]);
var chart = new google.visualization.ChartWrapper({
chartType: 'ComboChart',
containerId: 'chart',
dataTable: data,
options: {
focusTarget: 'category',
animation: {
startup: true,
easing: 'out',
duration: 500,
},
chartArea: {
left: 60,
top: 12,
right: 60,
bottom: 72,
height: '100%',
width: '100%'
},
height: '100%',
width: '100%',
vAxes: {
0: {
titlePosition: 'none',
textStyle: {
color: '#febd02',
bold: true,
fontSize: 13,
},
format: '#',
gridlines: {
color: '#eaeaea',
count: '5',
},
interpolateNulls: true,
},
1: {
titlePosition: 'none',
format: '#',
gridlines: {
color: 'transparent'
},
interpolateNulls: true,
},
2: {
groupWidth: '100%',
titlePosition: 'none',
textStyle: {
color: '#0284ff',
bold: true,
fontSize: 13,
},
format: 'decimal',
gridlines: {
color: 'transparent'
},
},
},
hAxis: {
textStyle: {
color: '#393939',
bold: true,
fontSize: 13,
},
format: 'dd MMM. yyyy',
gridlines: {
color: 'transparent'
},
ticks: data.getDistinctValues(0),
viewWindow: data.getColumnRange(0)
},
series: {
0: {
targetAxisIndex: 0,
type: 'area',
},
1: {
type: 'line'
},
2: {
targetAxisIndex: 2,
type: 'bars',
dataOpacity: 0.5,
},
},
colors: [
'#febd02',
'#a5a5a5',
'#0284ff',
],
bar: {
groupWidth: '35'
},
legend: {
position: 'none'
},
},
});
chart.draw();
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#chart {
min-height: 160px;
height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
options: {
height: '100%', width: '90%', backgroundColor: 'transparent',
tooltip: {
isHtml: true,
trigger: 'selection'
},
hAxis: { textPosition: 'none', logscale: true },
chartArea: {
width: "78%",
'backgroundColor': {
'fill': '#ffffff',
'opacity': 100
},
},
vAxis: {
textStyle: {
fontSize: 13 // or the number you want
},
viewWindow: {
min: 0,
max: 100
},
gridlines: {
color: 'transparent'
},
ticks: [0, 25, 50, 75, 100] // display labels every 25
},
legend: { position: 'none' },
colors: ["orange", "orange", "orange", "orange", "orange", "orange", "orange", "orange", "orange", "orange"]
},
I used above options to hide grid lines but in my case i want to draw x-axis and y-axis origin line alone in column chart.
x-axis is coming correct but in y-axis origin line i'm not able to draw.
can any one help me on this. thanks in advance.
Try this
hAxis: {
baselineColor: 'black',
ticks: []
},
vAxis: {
baselineColor: 'black',
ticks: []
}
The baseline for the hAxis is a vertical line and the baseline for the vAxis is a horizontal line. So if you want to remove the horizontal black line you need to set the vAxis baselineColor and vice-versa.
I am trying to create a chart that looks/functions like this with ZingChart.
I have tweaked a bar chart every way I can think of but I'm still not coming close.
Is this chart possible with ZingChart?
The following chart is mimicked from the cutout you have attached. If you have any questions about what I did, I can surely go into detail.
Note: For best viewing results look at the chart in the full page view.
var myConfig = {
type:'mixed',
title: {
text: 'Rank by MPH',
},
scaleX: {
offset: 0, // force line to start at scale
offsetEnd: 10, // force last bar away from end of the scale
maxItems: 2, // force display of first and last labels
tick: {
visible:false,
},
item: {
fontColor: '#000',
fontSize: 14,
rules: [ // adjust last label
{
rule: '%i == 16',
text: '129',
}
]
},
lineWidth:2,
lineColor: '#000',
},
scaleY: {
minValue: 0,
maxValue: 100,
step: 50,
format: '%v%',
markers: [
{ // diagonal line
type: 'line',
range: [0,100],
lineWidth: 3,
lineColor: '#000',
}
],
tick: {
visible:false,
},
item: {
fontColor: '#000',
fontSize: 14
},
guide: {
visible: false,
},
lineWidth:2,
lineColor: '#000',
},
labels: [
{ // hook label to line marker to display rank
hook: 'node:plot=1,index=1',
backgroundColor: '#000',
fontColor: '#fff',
text: 'Rank 11 / 16',
calloutWidth: 20,
callout: true,
calloutPosition: 'bottom',
padding: 15,
borderRadius: 10,
fontSize: 15,
offsetY: -50,
},
{ // hook label to scale to display mph
hook: 'scale:index=11',
text: '100 mph',
fontSize: 15,
offsetY: 15,
},
],
series: [
{
type: 'bar',
barWidth:20,
barSpacing:1,
borderRadius:'10 10 0 0',
backgroundColor: '#c0c0c0',
tooltip: {
backgroundColor: '#000',
text: 'Rank %i / 16',
calloutWidth: 20,
callout: true,
calloutPosition: 'bottom',
padding: 15,
borderRadius: 10,
fontSize: 15,
placement: 'node:top',
offsetY: -20,
},
rules: [
{ // make one bar purple
rule: '%i == 11',
backgroundColor: 'purple',
}
],
values: [null,5,9,12,19,25,30,34,39,45,49,54,58,65,69,74,79],
},
{
type: 'line',
lineColor: 'purple',
lineStyle: 'dotted',
valueBox: {
text: '%v%',
placement: 'left',
offsetX: -18,
fontSize: 12,
rules: [
{ // hide the valuebox at the node on the line
rule: '%i == 1',
visible: false,
}
],
},
marker: {
borderColor: 'purple',
borderWidth: 2,
backgroundColor: '#fff',
size: 9,
rules: [
{ // hide first marker of the line
rule: '%i == 0',
visible:false,
}
],
},
values: [[0,69], [11,69]], // array of arrays to better plot the line
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%',
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>
I recently ran into a strange issue with Google Charts and loading Google web fonts asynchronously. I was using loader.js and loading the most current version of the charts via google.charts.load('current', { 'packages': ['corechart'] });. Specifically, I was trying to draw two line charts on the same page and at the same time and set their attributes as below:
var options = {
...,
...,
titleTextStyle: {
...,
fontName: 'Lato'
}
}
I then set some additional attributes and defined the data and proceeded to draw the charts like normal. The first chart would be drawn but the second one would never materialize. Nothing was working so I backtracked through the code deleting chunks until I found that deleting fontName: 'Lato' is what resolved the issue. I was asynchronously loading my web fonts with this script:
<script type="text/javascript">
WebFontConfig = {
google: {
families: ['Lato:300, 400, 900']
}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
Loading my fonts while using this script, I was able to draw one chart, but when I attempted to draw two charts, I was never able to complete it. Every time, the first chart would be populated and the second chart never loaded. I had defined Lato as my primary font, but I did have backups defined as well. This didn't seem to help. My final solution was to load the web font the standard way with:
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,900" rel="stylesheet">
This resolved the issue but I don't like the idea of not being able to load the font asynchronously. Has anyone run into this awkward issue before or am I just missing something really obvious?
*****EDIT*****
Full chart code attached:
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var fontSizeGraph = window.getComputedStyle(document.getElementById('graph_font_size_source'), null).getPropertyValue('font-size');
fontSizeGraph = parseFloat(fontSizeGraph);
var interactivityPermissive = true;
if ($(window).width() < 768) {
interactivityPermissive = false;
} else {
interactivityPermissive = true;
};
var data = google.visualization.arrayToDataTable([
['Accepted Variance', 'High/Low', 'HiHi/LoLo'],
['0', 0, 0],
['1', 38, 45],
['2', 60, 68],
['3', 67, 75],
['4', 76, 88],
['5', 80, 93],
['6', 90, 102],
['7', 98, 108],
['8', 100, 111],
['9', 105, 117],
['10', 111, 123],
['11', 114, 126],
['12', 118, 130],
['13', 120, 134],
['14', 124, 140],
['15', 127, 142],
['16', 130, 145],
['16', 131, 146],
['18', 134, 148],
['19', 137, 153],
['20', 138, 155]
]);
var options = {
enableInteractivity: interactivityPermissive,
title: 'Delay Tags Preserved',
titlePosition: 'out',
titleTextStyle: {
color: '#3D414D',
fontName: "Lato",
fontSize: fontSizeGraph,
bold: true
},
chartArea: {
//top: '7%',
width: '90%',
height: '70%'
},
//chartArea: {'top': 0, 'left': 0},
colors: ['#3D414D', '#4EDEC2'],
curveType: 'function',
fontName: "Lato",
legend: {
position: 'bottom',
textStyle: {
color: '#3D414D',
fontName: "Lato"
}
},
vAxis: {
title: 'Alarm Count Reduction',
viewWindow: {
max: 180,
min: -5,
format: '#',
},
textStyle: {
color: '#3D414D',
fontName: "Lato"
},
showTextEvery: 20,
textPosition: 'in',
gridlines: {
color: '#EFECE7',
count: 5
}
},
hAxis: {
title: 'Accepted Variance (%)',
titleTextStyle: {
color: '#3D414D',
fontName: "Lato"
},
viewWindow: {
max: 24,
min: 0,
},
textStyle: {
color: '#3D414D',
fontName: "Lato"
},
format: '#',
showTextEvery: 2,
viewWindowMode: 'maximized'
},
lineWidth: 2,
tooltip: {
textStyle: {
color: '#3D414D',
fontName: "Lato",
fontSize: (fontSizeGraph * 0.5)
},
//isHtml: true,
ignoreBounds: true
},
animation: {
duration: 1000,
startup: true,
easing: 'out'
}
};
var chart1 = new google.visualization.LineChart(document.getElementById('results_graph_1'));
chart1.draw(data, options);
var data2 = google.visualization.arrayToDataTable([
['Accepted Variance', 'High/Low', 'HiHi/LoLo'],
['0', 0, 0],
['1', 81, 88],
['2', 135, 142],
['3', 180, 189],
['4', 223, 237],
['5', 255, 270],
['6', 303, 317],
['7', 343, 354],
['8', 362, 373],
['9', 380, 392],
['10', 406, 419],
['11', 420, 432],
['12', 443, 456],
['13', 459, 473],
['14', 476, 493],
['15', 493, 510],
['16', 513, 530],
['16', 520, 537],
['18', 533, 548],
['19', 546, 563],
['20', 555, 572]
]);
var options = {
enableInteractivity: interactivityPermissive,
title: 'Delay Tags Modified',
titlePosition: 'out',
titleTextStyle: {
color: '#3D414D',
fontName: "Lato",
fontSize: fontSizeGraph,
bold: true
},
chartArea: {
//top: '7%',
width: '90%',
height: '70%'
},
//chartArea: {'top': 0, 'left': 0},
colors: ['#3D414D', '#4EDEC2'],
curveType: 'function',
fontName: "Lato",
legend: {
position: 'bottom',
textStyle: {
color: '#3D414D',
fontName: "Lato"
}
},
vAxis: {
title: 'Alarm Count Reduction',
viewWindow: {
max: 600,
min: -5,
format: '#',
},
textStyle: {
color: '#3D414D',
fontName: "Lato"
},
showTextEvery: 20,
textPosition: 'in',
gridlines: {
color: '#EFECE7',
count: 5
}
},
hAxis: {
title: 'Accepted Variance (%)',
titleTextStyle: {
color: '#3D414D',
fontName: "Lato"
},
viewWindow: {
max: 24,
min: 0,
},
textStyle: {
color: '#3D414D',
fontName: "Lato"
},
format: '#',
showTextEvery: 2,
viewWindowMode: 'maximized'
},
lineWidth: 2,
tooltip: {
textStyle: {
color: '#3D414D',
fontName: "Lato",
fontSize: (fontSizeGraph * 0.5)
},
//isHtml: true,
ignoreBounds: true
},
animation: {
duration: 1000,
startup: true,
easing: 'out'
}
};
var chart2 = new google.visualization.LineChart(document.getElementById('results_graph_2'));
chart2.draw(data2, options);
}
I ran into the same issue, having 4 charts on one page, together with async webfont loader. Some charts randomly did not display.
It seems that, if there is a font specified on chart options, on draw, code checks if there is window.WebFont object, if yes, use it to load the font(s). Even if this font(s) is already loaded by webfont loader. Each chart draw call, keeps requesting the same fonts, and they keep getting appended as <link>s in <head>. This seems buggy behavior.
The way i hack fixed it, is removing webfont object before calling first chart draw.
google.charts.load('current', { 'packages': ['corechart'], 'callback': {
window.WebFont = null;
var chart1 = someChart();
chart1.draw();
}});