Develop Reference

How to add ticks to a Google line chart in JavaScript?

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].

Striped fill for google line chart

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);
}

Google Charts Loading Error

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();
}});

How to increase annotation font size and bold the annotation value in line chart of google api chart?

I am using google api line chart with annotation. How can I change the font size and font format?
<script type="text/javascript">
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', '');
data.addRows([['2010', '67', 67]]);
data.addRows([['2011', '69', 69]]);
data.addRows([['2012', '68', 68]]);
data.addRows([['2013', '67', 67]]);
var options = {
width: 350,
height: 250,
pointSize: 5,
legend: {position: 'none'},
chartArea: {
left: 0,
top: 60,
width: 300,
height: 75},
vAxis: {
baselineColor: '#fff',
gridlines: {color: '#fff'},
minValue: 64,
maxValue: 71
},
tooltip: {trigger: 'none'},
enableInteractivity: false,
annotation: {
1: {
style: 'default'
}
},
series: {0: {color: '#4D7AD3'}, 1: {color: '#4D7AD3'}}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<body>
<h2>Line Charts</h2>
<div id="chart_div"></div>
</body>

Try this
var options = {
annotations: {
textStyle: {
fontName: 'Times-Roman',
fontSize: 18,
bold: true,
italic: true,
color: '#871b47', // The color of the text.
auraColor: '#d799ae', // The color of the text outline.
opacity: 0.8 // The transparency of the text.
}
}
};
https://developers.google.com/chart/interactive/docs/gallery/linechart

Google Pie Chart does not display properly the slices

As you can see in the following image I have many pie charts in my webpage and they do not fill completely the container (generally only an half is filled or LESS):
Here some code:
var data1 = google.visualization.arrayToDataTable([
['Tipo', 'Valore'],
['Recapitate', sent],
['Ritornate/Bloccate', errors]
]);
options1 = {
width: 250,
height: 250,
pieHole: 0.5,
colors: ['#06dd00','#e12a00'],
legend: {position: 'none'},
pieSliceText: 'none',
tooltip: {textStyle: {color: '#333', fontName: 'Arial', fontSize: 16}},
chartArea:{left: 0,top: 0,width: "100%",height: "100%"},
enableInteractivity: false/*,
animation: { duration: 1000, easing: 'out' }*/
};
chart1 = new google.visualization.PieChart(document.getElementById('grafico-inviate'));
chart1.draw(data1, options1);
var data2 = google.visualization.arrayToDataTable([
['Tipo', 'Valore'],
['Aperte', unique_opened],
['Non aperte', combined1]
]);
options2 = {
width: 250,
height: 250,
pieHole: 0.5,
colors: ['#3e9ca8','#ff5932'],
legend: {position: 'none'},
pieSliceText: 'none',
tooltip: {textStyle: {color: '#333', fontName: 'Arial', fontSize: 16}},
chartArea:{left: 0,top: 0,width: "100%",height: "100%"},
enableInteractivity: false/*,
animation: { duration: 1000, easing: 'out' }*/
};
chart2 = new google.visualization.PieChart(document.getElementById('grafico-aperte'));
chart2.draw(data2, options2);
The problem arises independently from the OS/Web-Browser.
I do not know if this is a bug of the visualization API or am I missing something?
SOLVED!!:
Do not ask me why but if i put the data in the following way (using the javascript Number() function) it works:
var data2 = google.visualization.arrayToDataTable([
['Tipo', 'Valore'],
['Aperte', Number(unique_opened)],
['Non aperte', Number(combined1)]
]);

I do not know if this is your case but you can produce such semicircle in the following way. Your code little changed (only second part):
var unique_opened = 5.555; // real value: 11.11;
var combined1 = 44.445; // real value: 88.89;
var noshow = 50;
....
var data2 = google.visualization.arrayToDataTable([
['Tipo', 'Valore'],
['Aperte', unique_opened],
['Non aperte', combined1],
['noshow', noshow]
]);
options2 = {
width: 250,
height: 250,
pieHole: 0.5,
colors: ['#3e9ca8','#ff5932', '#ffffff'],
...
And you get:
Idea of Javier González