I'm a beginner with Google Visualizations. I'm having trouble with getting the "interpolateNulls: true" option working correctly with an AnnotationChart. If I use the same datasets with a basic LineChart, it works as expected. Here is my code and resulting charts:
<script type='text/javascript'>
google.load('visualization', '1.1', {'packages':['Annotationchart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = new google.visualization.DataTable(<?=$json1?>);
var data2 = new google.visualization.DataTable(<?=$json2?>);
var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]);
var chart1 = new google.visualization.AnnotationChart(document.getElementById('chart1'));
var options = {
displayAnnotations: false,
thickness: 2,
colors: ['red', 'blue'],
interpolateNulls: true,
curveType: 'function',
};
chart1.draw(joinedData, options);
}
produces:
http://imgur.com/r5sqtvd
Whereas:
<script type='text/javascript'>
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = new google.visualization.DataTable(<?=$json1?>);
var data2 = new google.visualization.DataTable(<?=$json2?>);
var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]);
var chart1 = new google.visualization.LineChart(document.getElementById('chart1'));
var options = {
displayAnnotations: false,
thickness: 2,
colors: ['red', 'blue'],
interpolateNulls: true,
curveType: 'function',
};
chart1.draw(joinedData, options);
}
produces:
http://imgur.com/qk79hob
What am I missing?
Thanks in Advance!
AnnotationChart has no option interpolateNulls. See google docs Annotation Chart.
Related
I get this error message "Cannot read property '0' of undefined google chart" when i load my 2 graphs and it only occurs when i load my page for the first time. If i click F5 on chrome they load properly. If i resize the browser they appear load properly. What could be the problem ? IE shows this error once, Chrome shows it every time i open the page for the first time. Some times i get this error when i load my page :
0x800a138f - JavaScript runtime error: Unable to get property 'arrayToDataTable' of undefined or null reference
Please see my code below :
<script src="../Scripts/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<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(drawChart1);
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart2);
$(window).resize(function () {
if (width != $(window).width() || height != $(window).height()) { //only refresh if screen size changes
drawChart1();
drawChart2();
width = $(window).width();
height = $(window).height();
}
});
$(document).ready(function () {
width = $(window).width();
height = $(window).height();
});
function drawChart1() {
var data = google.visualization.arrayToDataTable([
['Minute', 'Users'],
['0 Min', 9],
['1 Min', 28],
['2 Min', 1],
['3 Min', 1],
['5 Min', 1]
]);
var options = {
slices: {
0: { offset: 0.2 }
},
chartArea: { 'left': '5%', 'top': '10%', 'width': '100%',
'height': '100%' }
};
var chart = new
google.visualization.PieChart(document.getElementById('graph1'));
chart.draw(data, options);
}
function drawChart2() {
var data = google.visualization.arrayToDataTable([
['Minute', 'Users'],
['0 Min', 20],
['4 Min', 4],
['5 Min', 1],
['8 Min', 8],
['10 Min', 3]
]);
var options = {
// title: 'Group C Users'
pieHole: 0.5,
chartArea: { 'left': '5%', 'top': '10%', 'width': '100%',
'height': '100%' }
};
var chart = new
google.visualization.PieChart(document.getElementById('graph2'));
chart.draw(data, options);
}
first, you can remove jsapi, it is no longer being used...
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
next, you only need to call google.charts.load one time,
you can also include the callback in the load statement.
try replacing this...
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart1);
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart2);
with this...
google.charts.load('current', {
packages: ['corechart'],
callback: function () {
drawChart1();
drawChart2();
}
});
take for example I have the below chart which includes a trendline depicting the trend for an employee's progress over the course of a week.employee progress chart
the values for each day are brought in from a database as an INT datatype and the trendline acts accordingly. However, if an employees progress value is 0, how do I stop the trendline from acknowledging this and trending only to values above 0?
trendlines will ignore null values,
use null in place of zero.
see following working snippets...
with zero 0
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var dataTable = google.visualization.arrayToDataTable([
['Day', 'Amount'],
[1, 100],
[2, 4000],
[3, 250],
[4, 2400],
[5, 0]
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(dataTable, {
trendlines: {0: {}}
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
with null null
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var dataTable = google.visualization.arrayToDataTable([
['Day', 'Amount'],
[1, 100],
[2, 4000],
[3, 250],
[4, 2400],
[5, null]
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(dataTable, {
trendlines: {0: {}}
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I've 2 google charts on one page and both are displayed correctly. The problem is when I set fontName of both charts to 'Open Sans', only one chart is displayed. If both charts have some other font like 'Arial', then both are displayed. Also, if fontName for one chart is 'Open Sans' and 'Arial' for other, both charts are displayed. Error is only with 'Open Sans' for both charts. I've included Below is my code snippet. Can't get a solution to this. Please help. Thanks in advance..!!
<script type="text/javascript">
function commodityChart(){
// Load the Visualization API and the piechart package.
google.load('visualization', '1.1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
for($i=0;$i<count($data);$i++){
if($data[$i]->SEGMENT == 'COMMODITY'){
echo "['" . $data[$i]->PARAMETER . "'," . $data[$i]->AMOUNT . "],";
}
}
?>
]);
var formatter = new google.visualization.NumberFormat({prefix: '₹', format:'##,##,###.00'} );
formatter.format(data, 1);
// Set chart options
var options = {pieHole: 0.4,
fontSize: 13,
fontName: 'Open Sans',
is3D : true,
pieSliceText: 'value',
sliceVisibilityThreshold: 0,
// pieStartAngle: 100,
slices: {0: {offset: 0.3}},
//fontName: 'Open Sans',
legend: {position: 'right', alignment:'end'},
colors: ['#9bc53d', '#FF9900'],
'width':600,
// chartArea:{left:30,top:20,width:'70%',height:'75%'},
'height':500};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('gchart_pie_2'));
chart.draw(data, options);
}
}
</script>
<script type="text/javascript">
function equityChart(){
// Load the Visualization API and the piechart package.
google.load('visualization', '1.1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart1);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart1() {
// Create the data table.
var data1 = new google.visualization.DataTable();
data1.addColumn('string', 'type');
data1.addColumn('number', 'amount');
//data.addColumn({type: 'string', role: 'tooltip'});
data1.addRows([
<?
for($i=0;$i<count($data);$i++){
if($data[$i]->SEGMENT == 'EQUITY'){
echo "['" . $data[$i]->PARAMETER . "'," . $data[$i]->AMOUNT . "],";
}
}
?>
]);
var formatter = new google.visualization.NumberFormat({prefix: '₹', format:'##,##,###.00'} );
formatter.format(data1, 1);
// Set chart options
var options1 = {pieHole: 0.4,
is3D: true,`enter code here`
legend: {position: 'right', alignment:'end'},
//fontSize: 13,
fontName: 'Open Sans',
forceIFrame: false,
// pieSliceBorderColor: 'red',
pieSliceText: 'value',
//pieSliceTextStyle: {fontName: 'Open Sans', fontSize: 13},
chartArea:{left:20,top:20,width:'70%',height:'75%'},
// pieStartAngle: 20,
// slices: {0: {offset: 0.4}},
sliceVisibilityThreshold: 0,
// colors: ['#5bc0eb','#fde74c', '#9bc53d', '#e55934', '#fa7921'],
colors: ['#9bc53d','#fde74c', '#e55934', '#5bc0eb', '#FF9900'],
//tooltip: {isHtml: true},
'width':600,
'height':500};
// Instantiate and draw our chart, passing in some options.
var chart1 = new google.visualization.PieChart(document.getElementById('gchart_pie_1'));
chart1.draw(data1, options1);
}
}
enter code here
Try drawings the charts one at a time, that seems to fix the problem...
Here, I use the ready event to wait for the first chart to draw, then draw the second.
google.load('visualization', '1.1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
commodityChart();
}
function commodityChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Pepperoni', 33],
['Hawaiian', 26],
['Mushroom', 22],
['Sausage', 10],
['Anchovies', 9]
]);
var options = {
pieHole: 0.4,
fontSize: 13,
fontName: 'Open Sans',
is3D: true,
pieSliceText: 'value',
sliceVisibilityThreshold: 0,
slices: {
0: {
offset: 0.3
}
},
legend: {
position: 'right',
alignment:'end'
},
colors: [
'#9bc53d',
'#FF9900'
],
width: 600,
height: 500
};
var chart = new google.visualization.PieChart(document.getElementById('gchart_pie_2'));
google.visualization.events.addListener(chart, 'ready', equityChart);
chart.draw(data, options);
}
function equityChart() {
var data1 = new google.visualization.DataTable();
data1.addColumn('string', 'type');
data1.addColumn('number', 'amount');
data1.addRows([
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options1 = {
pieHole: 0.4,
is3D: true,
legend: {
position: 'right',
alignment: 'end'
},
fontName: 'Open Sans',
forceIFrame: false,
pieSliceText: 'value',
chartArea: {
left: 20,
top: 20,
width: '70%',
height: '75%'
},
sliceVisibilityThreshold: 0,
colors: [
'#9bc53d',
'#fde74c',
'#e55934',
'#5bc0eb',
'#FF9900'
],
width: 600,
height: 500
};
var chart1 = new google.visualization.PieChart(document.getElementById('gchart_pie_1'));
chart1.draw(data1, options1);
}
<script src="https://www.google.com/jsapi"></script>
<div id="gchart_pie_1"></div>
<div id="gchart_pie_2"></div>
I am trying to add a column data label to a google bar chart.
I have followed the instructions given in the API docs, and this is what I get:
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Searches'],
['1998', 9800],
['2000', 60000000],
['2007', 1200000000],
['2008', 1745000000],
['2009', 2610000000],
['2010', 3627000000],
['2011', 4717000000],
['2012', 5134000000],
['2013', 5922000000],
['2014', 5740000000]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" }]);
var options = {
chart: {
title: 'Google searches',
subtitle: 'Average searches per day 1998-2014',
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(view, options);
}
I must be doing something wrong as the chart fails to render any data labels.
What am I doing wrong?
https://jsfiddle.net/q9edfpte/1/
I did a number of changes*, and this one ultimately worked.
*Changes:
- 'packages':['bar'] --> 'packages':['corechart']
- google.charts.Bar --> google.visualization.ColumnChart
Working version (though needs beautifying):
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Searches'],
['1998', 9800],
['2000', 60000000],
['2007', 1200000000],
['2008', 1745000000],
['2009', 2610000000],
['2010', 3627000000],
['2011', 4717000000],
['2012', 5134000000],
['2013', 5922000000],
['2014', 5740000000]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" }]);
var options = {
title: 'Google searches',
subtitle: 'Average searches per day 1998-2014',
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_values'));
chart.draw(view, options);
}
I'm trying to use the chartArea.backgroundColor option of Google Charts, but it doesn't seem to work, although this option is clearly described in the doc : https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#Configuration_Options
JSfiddle
HTML :
<div id="piechart1" style="width: 900px; height: 500px;"></div>
JS :
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
chartArea: {'backgroundColor':'red'}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart1'));
chart.draw(data, options);
}
Any clue ?
Thanks a lot.
Referring to the official documentation
https://developers.google.com/chart/interactive/docs/gallery/piechart#exploding-a-slice
Use the slices attribute to change color of individual slice.
updated code from fiddle
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
slices: {
0: {color:'red' },
1: {color:'blue' },
2: {color:'green'},
3: {color:'black'},
4: {color:'teal'}
},
chartArea: {'backgroundColor':'red'}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart1'));
chart.draw(data, options);
}
Try this:
chart.draw(data, google.charts.PieChart.convertOptions(options));