I am racking my brain trying to understand how to do Ajax with Annotations in a Line Chart from Google Charts. I am looking for the numbers to sit direct above each point.
Information provided by grab_twitter_stats.php
[15, 194, 194],[14, 169, 169],[13, 155, 155],[12, 185, 185],[11, 154, 154],[10, 154, 154],[9, 135, 135],[8, 176, 176],[7, 193, 193],[6, 198, 198],[5, 185, 185],[4, 204, 204],[3, 219, 219],[2, 254, 254],[1, 230, 230],
Google Graphs Code:
<script type="text/javascript">
google.charts.load('current', {
callback: function () {
drawChart();
setInterval(drawChart, (20000));
function drawChart() {
$.ajax({
url: 'grab_twitter_stats.php',
type: 'get',
success: function (txt) {
// check for trailing comma
if (txt.slice(-1) === ',') {
txt = txt.substring(0, txt.length - 1);
}
var txtData = JSON.parse('[["Minutes", "Tweets", ""],' + txt + ']');
;
var data = google.visualization.arrayToDataTable(txtData);
data.addColumn('number', 'Minutes');
data.addColumn('number', 'Tweets');
data.addColumn({type: 'string', role: 'annotation'});
//alert(data);
var options = {
curveType: 'function',
hAxis: {
format: '#',
baseline:15,
direction: '-1',
textStyle: {
color: '#7acdd0',
fontSize: 20
},
gridlines: {
color: 'transparent'
},
viewWindow:{
max:15,
min:1
},
},
vAxis: {
baseline:0,
gridlines: {
color: 'transparent'
},
textStyle: {
color: '#7acdd0',
fontSize: 20
}
},
pointSize: 15,
chartArea: {'width': '89%', 'height': '65%'},
pointShape: 'circle',
lineWidth: 5,
colors: ['#7acdd0'],
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.
}
},
legend: { position: 'none' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
});
}
},
packages: ['corechart']
});
</script>
The end display looks something like this:
You can also see here that ToolTips are working, but it provides the name for whatever I set the 3rd item to in JSON.parse.
What am I missing? Thanks.
need to adjust how the DataTable is built
currently, the table is created using arrayToDataTable
var txtData = JSON.parse('[["Minutes", "Tweets", ""],' + txt + ']');
var data = google.visualization.arrayToDataTable(txtData);
this creates the table with 3 columns and all the rows
then 3 more columns are added
data.addColumn('number', 'Minutes');
data.addColumn('number', 'Tweets');
data.addColumn({type: 'string', role: 'annotation'});
but no data is ever provided to these columns
instead, create a blank table, then add the columns and rows...
var txtData = JSON.parse('[' + txt + ']');
var data = new google.visualization.DataTable();
data.addColumn('number', 'Minutes');
data.addColumn('number', 'Tweets');
data.addColumn({type: 'number', role: 'annotation'});
data.addRows(txtData);
be sure to remove the column definitions from txtData
also, for the annotation, you should probably use --> type: 'number'
or change the type in the array being passed --> [15, 194, "194"]
see following working snippet...
(using static data but will translate back to ajax just the same)
google.charts.load('current', {
callback: function () {
var txt = "[15, 194, 194],[14, 169, 169],[13, 155, 155],[12, 185, 185],[11, 154, 154],[10, 154, 154],[9, 135, 135],[8, 176, 176],[7, 193, 193],[6, 198, 198],[5, 185, 185],[4, 204, 204],[3, 219, 219],[2, 254, 254],[1, 230, 230]";
var txtData = JSON.parse('[' + txt + ']');
var data = new google.visualization.DataTable();
data.addColumn('number', 'Minutes');
data.addColumn('number', 'Tweets');
data.addColumn({type: 'number', role: 'annotation'});
data.addRows(txtData);
var options = {
curveType: 'function',
hAxis: {
format: '#',
baseline:15,
direction: '-1',
textStyle: {
color: '#7acdd0',
fontSize: 20
},
gridlines: {
color: 'transparent'
},
viewWindow:{
max:15,
min:1
},
},
vAxis: {
baseline:0,
gridlines: {
color: 'transparent'
},
textStyle: {
color: '#7acdd0',
fontSize: 20
}
},
pointSize: 15,
chartArea: {'width': '89%', 'height': '65%'},
pointShape: 'circle',
lineWidth: 5,
colors: ['#7acdd0'],
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.
}
},
legend: { position: 'none' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart"></div>
Related
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();
}});
I have a problem. Im relatively new to Javascript but I am working on a project where people want to have charts about their improvements. I have sucessfuly made 2 charts, while I do have problems for the 3rd one. The numbers consist of 0.000yyyyy when y stands for random numbers, and when you hover the chart, info shows 0. I put fractionDigits in options, but cant get them to work right.
Here is the code:
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBackgroundColor);
function drawBackgroundColor(transparent) {
var data = new google.visualization.DataTable();
data.addColumn('date', 'X');
data.addColumn('number', 'Xaurum Gold Growth');
data.addRows([
[new Date(2015 , 03 , 15),0.000125],
[new Date(2015 , 04 , 09),0.000125202590875],
[new Date(2015, 04, 12), 0.000126019393875],
]);
var options = {
hAxis: {
title: 'Time',
textStyle:{color: '#FFF'},
titleTextStyle: {
color: '#fff'
}
},
vAxis: {
title: 'Value',
textStyle:{color: '#FFF'},
titleTextStyle: {
color: '#fff'
}
},
legend: {
textStyle: {color: '#fff'}
},
NumberFormat: {
fractionDigits:15,
},
annotations: {
boxStyle: {
stroke: '#765e34',
strokeWidth: 10,
}
},
backgroundColor: "transparent",
colors: ['#876c3c'],
};
var chart = new google.visualization.LineChart(document.getElementById('charta_div'));
chart.draw(data, options);
}
to format the number in the tooltip, use NumberFormat, after data is built
// format data
var formatter = new google.visualization.NumberFormat({
fractionDigits: 15
});
formatter.format(data, 1);
see following working snippet...
google.charts.load('current', {
callback: drawBackgroundColor,
packages: ['corechart']
});
function drawBackgroundColor(transparent) {
var data = new google.visualization.DataTable();
data.addColumn('date', 'X');
data.addColumn('number', 'Xaurum Gold Growth');
data.addRows([
[new Date(2015 , 03 , 15), 0.000125],
[new Date(2015 , 04 , 09), 0.000125202590875],
[new Date(2015, 04, 12), 0.000126019393875]
]);
// format data
var formatter = new google.visualization.NumberFormat({
fractionDigits: 15
});
formatter.format(data, 1);
var options = {
hAxis: {
title: 'Time',
textStyle:{
color: '#FFF'
},
titleTextStyle: {
color: '#fff'
}
},
vAxis: {
title: 'Value',
textStyle:{
color: '#FFF'
},
titleTextStyle: {
color: '#fff'
}
},
legend: {
textStyle: {
color: '#fff'
}
},
annotations: {
boxStyle: {
stroke: '#765e34',
strokeWidth: 10,
}
},
backgroundColor: 'transparent',
colors: ['#876c3c']
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
before styling annotations, you must include an annotation column
use a DataView to add the column using a function to "stringify" the series column
see following working snippet...
google.charts.load('current', {
callback: drawBackgroundColor,
packages: ['corechart']
});
function drawBackgroundColor(transparent) {
var data = new google.visualization.DataTable();
data.addColumn('date', 'X');
data.addColumn('number', 'Xaurum Gold Growth');
data.addRows([
[new Date(2015, 03, 15), 0.000125],
[new Date(2015, 04, 09), 0.000125202590875],
[new Date(2015, 04, 12), 0.000126019393875],
[new Date(2015, 05, 22), 0.000126211199625],
[new Date(2015, 06, 07), 0.000127017994375],
[new Date(2015, 06, 08), 0.000127487763],
[new Date(2015, 06, 09), 0.000128022515125],
[new Date(2015, 06, 10), 0.00012886722975],
[new Date(2015, 06, 11), 0.00012921927025],
]);
// add annotation column
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 15
});
formatter.format(data, 1);
var options = {
hAxis: {
title: 'Time',
textStyle: {
color: '#FFF'
},
titleTextStyle: {
color: '#fff'
}
},
vAxis: {
title: 'Value',
textStyle: {
color: '#FFF'
},
titleTextStyle: {
color: '#fff'
}
},
legend: {
textStyle: {
color: '#fff'
}
},
annotations: {
boxStyle: {
stroke: '#876c3c',
strokeWidth:3
},
textStyle: {
color: '#876c3c'
}
},
backgroundColor: "transparent",
colors: ['#876c3c']
};
var chart = new google.visualization.LineChart(document.getElementById('charta_div'));
// use data view to draw chart
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="charta_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 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
I am using corechart. When the pie chart appears, want to print the details of pie chart below the chart.
Example :
Want to print the details of chart in given form.
(color red) reading : 20% , (color blue) sleeping :30% , (color green) Playing :10%
and so on...
Could anyone please help me?
<script type="text/javascript">
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Investment');
data.addColumn('number', 'Amount');
data.addRows(5);
data.setValue(0, 0, 'Cash');
data.setValue(0, 1, 21217.31);
data.setValue(1, 0, 'GIC 9658');
data.setValue(1, 1, 2500.30);
data.setValue(2, 0, 'GIC 9657');
data.setValue(2, 1, 1515.18);
data.setValue(3, 0, 'Fund 5612');
data.setValue(3, 1, 5115.74);
data.setValue(4, 0, 'Fund 5617');
data.setValue(4, 1, 3032.33);
var formatter = new google.visualization.NumberFormat({prefix: '$'});
formatter.format(data, 1);
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, {
title: 'Distribution of Assets',
legend: {
position: 'left',
alignment:'end'
},
is3D: true,
pieSliceText: 'value',
pieSliceTextStyle:{color: '#FFFFFF', fontName: 'Sans-Serif', fontSize: 14},
legendTextStyle: {color: '#333333', fontName: 'Sans-Serif', fontSize: 14},
tooltipTextStyle: {color: '#666666', fontName: 'Sans-Serif', fontSize: 14},
chartArea:{left:0,top:0,width:"100%",height:"100%"}
});
}
google.setOnLoadCallback(drawVisualization);
</script>