Related
I need to add a simple icon image (warning) to the center of a particular donut chart slice with chart.js... unfortunately I don't find any configuration option, in the official docs, for this purpose.
You can see an example of the result I need via the following link.
Is there any good Samaritan who can help me?
Example image
This can be done with chartjs-plugin-labels as follows:
var myChart = new Chart(document.getElementById('myChart'), {
type: 'doughnut',
data: {
labels: ['A', 'B', 'C'],
datasets: [{
data: [11, 39, 20],
backgroundColor: ['#ffb74d', '#4db6ac', '#bf360c']
}]
},
options: {
responsive: true,
plugins: {
labels: {
render: 'image',
images: [
null,
null,
{
src: 'https://i.stack.imgur.com/9EMtU.png',
width: 20,
height: 20
}
]
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart" height="100"></canvas>
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();
}
});
I need to get paging information of the legends. As shown in below image we have paging for legends.so, we need to get current selected page and number of page information.
click here for image
since there are no configuration options,
you'll have to inspect the SVG element which contains the information,
once the 'ready' event fires
see following working snippet...
google.charts.load('current', {
callback: function () {
var container = document.getElementById('chart_div');
var chart = new google.visualization.PieChart(container);
var message = document.getElementById('msg_div');
google.visualization.events.addListener(chart, 'ready', getLegendPage);
google.visualization.events.addListener(chart, 'select', getLegendPage);
function getLegendPage() {
Array.prototype.forEach.call(container.getElementsByTagName('text'), function(text) {
if (text.getAttribute('text-anchor') === 'middle') {
var legendPages = text.innerHTML.split('/');
message.innerHTML = 'Selected Legend page is ' + legendPages[0] + ' of ' + legendPages[1];
}
});
}
chart.draw(google.visualization.arrayToDataTable([
['Task', 'Hours'],
['A', 19.2],
['B', 30.8],
['C', 50.0],
['D', 19.2],
['E', 30.8],
['F', 50.0],
['G', 19.2],
['H', 30.8],
['I', 50.0],
['J', 19.2],
['K', 30.8],
['L', 50.0],
['M', 19.2],
['N', 30.8],
['O', 50.0]
]), {
height: 400,
chartArea: {
top: 24
},
legend: 'top',
pieHole: 0.4,
width: 400
});
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="msg_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 using the Following show the Column Chart for my records, i want to give spaces between the bars that are generating, please help.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', '11-02-2013', '11-02-2013','11-02-2013','11-02-2013'],
['Weeks', 10,20,30,5],
]);
var options = {
title: 'Weekly Average Weight Loss Performance Chart For All Users',
is3D: true,
//isStacked: true,
isHtml: false,
// colors: ['d2ac2c', 'ff0000', '029748'],
bar: { groupWidth: '10%' },
legend:{position: 'bottom'},
//chbh:'0,10,0',
//hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
var options = {
bar: { groupWidth: '100%' },
The usual format for a column chart is that each series has its own column, grouped by rows. Since you have all 4 data points in the same row, you will end up having them all clumped together in the same group. If you change your data, you will get separation as each will be in a separate group:
var data = google.visualization.arrayToDataTable([
['Date', 'Data'],
['11-02-2013', 10],
['11-02-2013', 20],
['11-02-2013', 30],
['11-02-2013', 5]
]);
If you want to show multiple people, grouped by weeks, then you would do something like this:
var data = google.visualization.arrayToDataTable([
['Date', 'Alan', 'Beatrice', 'Charlie', 'Diana'],
['11-02-2013', 10, 5, 15, 20],
['11-02-2013', 20, 1, 2, 3],
['11-02-2013', 30, 25, 20, 15],
['11-02-2013', 5, 7, 9, 11]
]);
This will group your data by week (so all 4 people would be shown in the same week as a single group) with gaps between the weeks (between each 'group' of data).