I am trying to generate a Doughnut chart using Chart Js Library and it turns out to be throwing an error Uncaught TypeError: (intermediate value).Doughnut is not a function. I double checked the js files linking , everything looks fine. Did anyone face this issue earlier?
Here is my code:
function getPieChart(pAmt, iAmt, pFee) {
//pie chart code starts here
var data = [
{
value: pAmt,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Principal Amount"
}, {
value: iAmt,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Interest Amount"
}, {
value: pFee,
color: "#FDB45C",
highlight: "#FFC870",
label: "Processing Fee"
}];
var options = {
segmentShowStroke: true,
animateRotate: true,
animateScale: false,
percentageInnerCutout: 50,
segmentStrokeColor: "#fff",
tooltipTemplate: "<%= label%>: Rs.<%= converter(value) %>",
segmentStrokeWidth: 2,
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><div class=\"col-md-12\"><div class=\"emicleft col-md-6\"><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%=segments[i].label%></div><div class=\"emicright col-md-6\"><i class=\"fa fa-inr\"></i> <span class=\"emicrightspan\"><%=converter(segments[i].value)%></span></div></div></li><%}%></ul>"
};
var ctx = document.getElementById("emichart").getContext("2d");
var myChart = new Chart(ctx).Doughnut(data, options);
document.getElementById('js-legend').innerHTML = myChart.generateLegend();
}
If you have switched to chart.js v2, this error will occur since there is a new syntax.
Here is a link to the issue and here is a link to the new syntax.
Here is an example:
var config = {
type: 'pie',
data: {
datasets: [{
data: [
pAmt,
iAmt,
pFee
],
backgroundColor: [
"#F7464A",
"#46BFBD",
"#FDB45C"
],
}],
labels: [
"Principal Amount",
"Interest Amount",
"Processing Fee"
]
},
options: {
responsive: true
}
};
window.onload = function() {
var ctx = document.getElementById("emichart").getContext("2d");
window.myPie = new Chart(ctx, config);
};
Related
My Pie chart but actually i want this
type of chart
I want to display dynamically label and label values in pie chart using chart
js but according to my code which i have written ,it display all label in one
label. I don't know where is the issue in my code.I don't know as much about
js. Please guide me.Thanks in advance.
$("#get_data").click(function(){
var employees = $("#employees").val();
//var fairs = $("#fairs").val();
$.ajax({
url : 'php_script/chart_values.php',
method : 'POST',
data : {employees:employees},
success : function(data){
var obj = JSON.parse(data);
var a = obj[0]; // labele data "Negotiation on
proposal","Won","Contracted","Intersted",
var b = obj[1]; // label values "100","90","70"
var labeldata;
for( i=0; i<a.length;i++){ // loop to fetch label data one by one
labeldata += [a][i];
}
console.log(labeldata);
var chart = new CanvasJS.Chart("chartContainer", {
title: {
//text: "Worldwide Smartphone sales by brand - 2012",
fontSize:15
},
axisY: {
title: "Products in %"
},
legend :{
verticalAlign: "center",
horizontalAlign: "right"
},
data: [{
type: "pie",
showInLegend: true,
toolTipContent: "{label} <br/> {y} %",
indexLabel: "{y} %",
dataPoints: [
{
label: [labeldata],y:19 // dispaly lable data here
}
/*{ label: "Apple", y: 19.1, legendText: "Apple" },
{ label: "Huawei", y: 4.0, legendText: "Huawei" },
{ label: "LG", y: 3.8, legendText: "LG Electronics"},
{ label: "Lenovo", y: 3.2, legendText: "Lenovo" },
{ label: "Others", y: 39.6, legendText: "Others" } */
]
}
]
});
chart.render();
}
});
});
This is my complete code and this is working perfectly.
$("#get_data").click(function(){
var employees = $("#employees").val();
//var fairs = $("#fairs").val();
$.ajax({
url : 'php_script/chart_values.php',
method : 'POST',
data : {employees:employees},
success : function(data){
$("#page_content").fadeIn();
$("#bar_chart_div").fadeOut();
var obj = JSON.parse(data);
var a = obj[0]; // labele data "Won","Contracted","Intersted"
var b = obj[1]; // label values "100","90","70"
var labeldata=[];
for( i=0; i<a.length;i++){
labeldata.push({label:a[i],y:parseInt(b[i]),legendText:a[i]});
}
debugger;
console.log(JSON.stringify(labeldata));
var chart = new CanvasJS.Chart("chartContainer", {
title: {
fontSize:15
},
axisY: {
title: "Products in %"
},
legend :{
verticalAlign: "center",
horizontalAlign: "right"
},
data: [{
type: "pie",
showInLegend: true,
toolTipContent: "{label} <br/> {y} ",
indexLabel: "{y} %",
dataPoints: labeldata
}]
});
chart.render();
}
});
});
I have a igdatagrid column chart in my application . The requirement is to update the chart as per the change in data. the chart also has Customtooltip on the bars which can be seen on hover . now when the data changes ,chart is rendered if tooltip is not used but when i use tooltip it shows error .
initially while loading my page everything works fine but after updating the datasource it shows some error
this is my javascript code
$("#chart").igDataChart({
width: "98%",
height: "350px",
dataSource: jsonObj,
title: "Sector Comparison",
windowResponse: "immediate",
axes: [{
name: "xAxis",
type: "categoryX",
label: "xValue",
labelTopMargin: 5,
gap: 5
}, {
name: "yAxis",
type: "numericY",
minimumValue: 0,
maximumValue: 109,
labelLocation: "outsideRight",
majorStrokeThickness: 2,
majorStroke: "#0856a7",
minorStroke: 'black',
minorInterval: 10,
interval: 50,
formatLabel: function (value) {
if (value == 50) {
return "Medium value";
}
},
}, {
name: "yAxis1",
type: "numericY",
title: "Rank",
minimumValue: 0,
maximumValue: 109,
labelLocation: "outsideLeft",
interval: 10,
formatLabel: function (value) {
return value;
},
}],
series: [{
name: "series1",
type: "column",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
xAxis: "xAxis",
yAxis: "yAxis",
valueMemberPath: "value",
showTooltip: true,
remove: true,
isCustomCategoryStyleAllowed: true,
}],
assigningCategoryStyle: function (e, ui) {
var startIndex = ui.startIndex;
var endIndex = ui.endIndex;
var items =ui.getItems(startIndex,endIndex);
var color = ui.fill;
for (var i = 0; i < items.length; i++) {
if (items[i].color) {
color = items[i].color;
}
}
ui.fill = color;
}
this is the code i write while binding tooltip initially
//get
var series = $("#chart").igDataChart("option", "series");
series[0].tooltipTemplate;
//Set
$("#chart").igDataChart("option", "series",
[{
name: "series1",
type: "column",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
xAxis: "xAxis",
yAxis: "yAxis",
valueMemberPath: "value",
showTooltip: true,
isCustomCategoryStyleAllowed: true,
tooltipTemplate: "CustomTooltipTemplate",
}]
);
"CustomTooltipTemplate" is my custom tooltip template that works completely fine initially
when i get the new data after which i try to update chart with tooltip
series[0].tooltipTemplate;
show error in console as
Cannot read property 'tooltipTemplate' of undefined
and if i don't use custom template and just use property showTooltip
Cannot read property 'updateToolTip' of undefined is shown ,
is there any way i can use custom tootltip and dataSource dynamically.
i used to update the datasource i,e jsonObj .
i found the solution .
on updation of chart i overwrite the series and assign datasource to the chart and renderseries as below and it works
$("#chart").igDataChart({
series: [{
name: "series1",
type: "column",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
xAxis: "xAxis",
yAxis: "yAxis",
valueMemberPath: "value",
isCustomCategoryStyleAllowed: true,
}],
});
$("#chart").igDataChart("option", "dataSource", jsonObj);
$("#chart").igDataChart("renderSeries", "xAxis", false);
$("#chart").igDataChart("renderSeries", "yAxis", false);
$("#chart").igDataChart("renderSeries", "yAxis1", false);
I'm using ChartJS version 2.6.0. and I'm having some difficulties with the 'title' option of the chart. It's simply not showing on the rendered chart.
I'm following the documentation, and passing the title in as described:
var options = {
type: 'line',
data: data,
title: {
display: true,
text: 'PLEASE DISPLAY FOR HEAVEN\'S SAKE'
},
responsive: true,
bezierCurve: true,
legend: {
display: true,
labels: {
fontColor: 'rgb(255, 99, 132)'
}
},
pointHitDetectionRadius: 1,
events: ['click']
}
var canvas = document.getElementById("chartId");
var ctx = canvas.getContext("2d");
var chart = new Chart(ctx, options);
However, the title simply wont show. Here is a fiddle with a dougnut chart, that has the same issue. What am I missing here?
You need to wrap the title object inside an options object like
var myChart = new Chart(ctx, {
type: 'doughnut',
options: {
plugins: {
title: {
display: true,
text: 'TEST'
}
}
}
....
Here are the docs for a full list of all the options, chartjs:title
var data = [2137680, 6282693, 805566, 2568163, 598599, 3189284, 599112, 926340, 5548295, 11847685, 66445];
var labels = ["Management", "Finance", "Human Resources", "Business Development and Marketing", "Information Technology", "Professional Development and Training", "Knowledge Management", "Logistics", "Support", "Business Services", "Other"];
var bgColor = ["#878BB6", "#FFEA88", "#FF8153", "#4ACAB4", "#c0504d", "#8064a2", "#772c2a", "#f2ab71", "#2ab881", "#4f81bd", "#2c4d75"];
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'doughnut',
options: {
title: {
display: true,
text: 'TEST'
}
},
data: {
labels: labels,
datasets: [{
data: data,
backgroundColor: bgColor
}]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400">
</canvas>
https://jsfiddle.net/unf4exa2/
Please try adding options object inside for title
https://jsfiddle.net/Jaffreena/ha19ozqy/93/
var data = [2137680, 6282693, 805566, 2568163, 598599, 3189284, 599112, 926340, 5548295, 11847685, 66445];
var labels = ["Management", "Finance", "Human Resources", "Business Development and Marketing", "Information Technology", "Professional Development and Training", "Knowledge Management", "Logistics", "Support", "Business Services", "Other"];
var bgColor = ["#878BB6", "#FFEA88", "#FF8153", "#4ACAB4", "#c0504d", "#8064a2", "#772c2a", "#f2ab71", "#2ab881", "#4f81bd", "#2c4d75"];
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: labels,
datasets: [{
data: data,
backgroundColor: bgColor
}]
},
options: {
title: {
display: true,
text: 'Custom Chart Title'
}
}
});
You need to wrap the title object inside the plugins object and then plugins inside options.
Version: 3.7.1
var myChart = new Chart(ctx, {
type: 'doughnut',
options: {
plugins:{
title: {
display: true,
text: 'Title'
}
}
}
This will surely work!
Your title property should come inside another property called options. Try this.
options : {
title: {
display: true,
text: 'TITLE HERE'
}
}
You can check for some examples here as well.
You should import the Title first:
import { Chart as ChartJS, ArcElement, Tooltip, Legend, Title } from 'chart.js';
and then add your Tile to your Register:
ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels, Title);
finally use your title in options.plugins:
const options: any = {
plugins: {
title: {
display: true,
text: "Your Title",
},
}
}
In your JSFiddle, you forgot to add options.
The example in the documentation is:
options: {
title: {
display: true,
text: 'Custom Chart Title'
}
},
See this fiddle: https://jsfiddle.net/ha19ozqy/90/
I am trying to add labels to my bar chart. See the JS fiddle and code below. How would I change my code to add labels?
http://jsfiddle.net/amwmedia/8kqvyhqv/
var myNewChart;
var data = [
{
value: 30,
label: "hello",
color: "#F7464A"
}, {
value: 50,
color: "#E2EAE9"
}, {
value: 100,
color: "#D4CCC5"
}, {
value: 40,
color: "#949FB1"
}, {
value: 100,
color: "#4D5360"
},
];
var options = {
animation: true,
animationEasing: 'easeInOutQuart',
animationSteps: 80,
multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
};
var ctx = document.getElementById("myChart")
.getContext("2d");
myNewChart = new Chart(ctx).Doughnut(data, options);
I noticed your jsfiddle is using chart.js version 1. My answer uses version 2, as that is all I could find documentation for.
Looks like all you need to do is put labels in the data object:
var data = {
labels: [
"label1",
"label2",
"label3",
"label4",
"label5"
],
datasets: [
{
data: [
30,
50,
100,
40,
100
],
backgroundColor:[
'#F7464A',
'#E2EAE9',
'#D4CCC5',
'#949FB1',
'#4D5360'
]
}]
};
See fiddle. (this is using Chart.js 2.0)
I want to know how I would be able to show Labels on the doughnut chart and the legend, I'm using chart.js as plugin
I used scaleShowLabels: true but It doesn't work
here is my code :
var data = [{
value: 30,
color: "#F7464A",
label: "Yasser"
}, {
value: 50,
color: "#E2EAE9",
label: "Zeyd"
}, {
value: 100,
color: "#D4CCC5",
label: "Mouad"
}, {
value: 40,
color: "#949FB1",
label: "Hanine"
}, {
value: 120,
color: "#4D5360",
label: "Kheira"
}
]
var options = {
animation: false,
scaleShowLabels: true
};
//Get the context of the canvas element we want to select
var c = $('#myChart');
var ct = c.get(0).getContext('2d');
var ctx = document.getElementById("myChart").getContext("2d");
/*************************************************************************/
myNewChart = new Chart(ct).Doughnut(data, options);
DEMO + CODE
I found all the solutions of the Chart js main problems,
it's about an edited js file, which has all code samples, you can find more information about it here :
https://github.com/FVANCOP/ChartNew.js