Tested versions:
Google Chrome - 56.0.2924.87
Mozilla Firefox - 51.0.1 (32-bit)
While developing my app in Chrome, I was able to insert a pie graphic with legends beneath it. But some time after I went to that page again and the graph did not render anymore. Tried it in Firefox and it rendered.
So by my tests I was able to detect that by updating the Chart.js version from 0.2.0 to 2.5.0 it made impossible for Chrome to render the graph.
Is it true that the only Chart.JS version to work in Chrome is the 0.2.0, or my tests are wrong?
TESTS:
Using Chart.JS v. 0.2.0 in Chrome
var pieData = [{
value: 20,
color: "#878BB6",
},
{
value: 40,
color: "#4ACAB4",
},
{
value: 10,
color: "#FF8153",
},
{
value: 30,
color: "#FFEA88",
}
];
// Get the context of the canvas element we want to select
var myChart = document.getElementById("myChart").getContext("2d");
new Chart(myChart).Pie(pieData);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script>
</head>
<body>
<script>
</script>
<h1>Chart.js Sample</h1>
<canvas id="myChart" width="600" height="400"></canvas>
</body>
</html>
Using Chart.JS v. 2.5.0
var pieData = [{
value: 20,
color: "#878BB6"
},
{
value: 40,
color: "#4ACAB4"
},
{
value: 10,
color: "#FF8153"
},
{
value: 30,
color: "#FFEA88"
}
];
// Get the context of the canvas element we want to select
var ctx = document.getElementById("myData").getContext("2d");
//new Chart(ctx).Pie(pieData);
/* New way to instantiate so that it do not thows Uncaught
TypeError: (intermediate value).Pie is not a function" */
var myPieChart = new Chart(ctx, {
type: 'pie',
data: pieData
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js" type="text/javascript"></script>
</head>
<body>
<script>
</script>
<h1>Chart.js Sample</h1>
<canvas id="myData" width="600" height="400"></canvas>
</body>
</html>
Your data structure for version 2.5.0 is completely wrong, it needs to look more like this (if it was working for you in Firefox using the shown data structure then I have no idea why, because it shouldn't have):
var pieData = {
labels: ["Purple", "Green", "Orange", "Yellow"],
datasets: [
{
data: [20, 40, 10, 30],
backgroundColor: [
"#878BB6",
"#4ACAB4",
"#FF8153",
"#FFEA88"
]
}]
};
Notice how it's no longer an array of objects, but an object containing arrays. Also the direct properties of pieData are labels and datasets and then datasets is split into the values and the background color.
Link to the Pie Chart data structure documentation for reference: Chart JS Documentation
JSFiddle example: https://jsfiddle.net/0vh3xhsw/2/
var pieData = {
labels: ["Purple", "Green", "Orange", "Yellow"],
datasets: [{
data: [20, 40, 10, 30],
backgroundColor: [
"#878BB6",
"#4ACAB4",
"#FF8153",
"#FFEA88"
]
}]
};
// Get the context of the canvas element we want to select
var ctx = document.getElementById("myData").getContext("2d");
//new Chart(ctx).Pie(pieData);
/* New way to instantiate so that it do not thows Uncaught
TypeError: (intermediate value).Pie is not a function" */
var myPieChart = new Chart(ctx, {
type: 'pie',
data: pieData
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js" type="text/javascript"></script>
</head>
<body>
<script>
</script>
<h1>Chart.js Sample</h1>
<canvas id="myData" width="600" height="400"></canvas>
</body>
</html>
Related
I have been trying to add a number on the inside of the "Simple donut chart" from ApexCharts. This is the link to it - https://apexcharts.com/javascript-chart-demos/pie-charts/simple-donut/ .
To use the chart, I ran the command "npm install apexcharts --save" in my project terminal.
This is my HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./Chart.css">
<script src="./Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<div id="chart"></div>
<script>
const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
</html>
This is my CSS file:
#chart{
width:400px;
height:400px;
margin-left: auto;
margin-right: auto;
}
This is what I used in my JavaScript file:
var options = {
series: [44, 55, 41, 60],
labels: ["Transport", "Shopping", "Energy use", "Food"],
chart: {
type: 'donut',
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
};
This is the result of the code mentioned above:
Current Chart
This is a model to show how I would like the number to be displayed:
Example Chart
I would like to know if its possible to add a number inside the current chart with ApexCharts as the example chart shows.
Yes it's possible.
let options = {
series: [44, 55, 41, 60],
labels: ["Transport", "Shopping", "Energy use", "Food"],
chart: {
type: 'donut',
},
plotOptions: {
pie: {
donut: {
labels: {
show: true,
total: {
show: true,
label: '',
formatter: () => 'Text you want'
}
}
}
}
}
};
const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts#3.18.1/dist/apexcharts.min.js"></script>
<div id="chart"></div>
You can show the following information inside a donut:
a value of an individual donut piece (on hover to that piece)
the total of all the donut pieces
custom text
Try to change values of the total object properties to better understanding what I mean. More detailed information is here
I'm currently working with Chart.js, and I need to change between two differents datasets. To do this I just change the dataset and use the Update function.
The main problem is that when you change multiple times between the datasets, the animation dissapears and it looks horrible.
Here you can see what I'm talking about and my code.
Does somebody know how could I fix it?
Thanks a lot!
And here is my code, in case the link doesn't work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chart.js Example</title>
<!-- import plugin script -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js'></script>
</head>
<body>
<!-- bar chart canvas element -->
<canvas id="chart" width="600" height="400"></canvas>
<button onclick="manageCharts()" id="chartDataButton">Chart 2</button>
</body>
</html>
And the javascript code
Chart.defaults.global.responsive = false;
var chartData1 = {
labels : ["L1", "l2", "l3", "l4"],
datasets : [{
label: "LEGEND",
data : [13, 23, 9, 4],
backgroundColor: "#FF88CC",
borderColor: "#000000",
borderWidth: 1,
}]
}
var chartData2 = {
labels : ["L11", "L12"],
datasets : [{
label: '{{ legend }}',
data : [7, 1],
backgroundColor: "#FEFE65",
borderColor: "#00FFFF",
borderWidth: 2,
}]
}
var pieChartOptions = {
rotation: -Math.PI,
cutoutPercentage: 30,
circumference: Math.PI,
legend: {
position: 'left'
},
animation: {
animateRotate: true,
animateScale: false
}
};
// get chart canvas
var ctx = document.getElementById("chart").getContext("2d");
var pieChart = new Chart(ctx, {
type: 'pie',
data: chartData1,
options: pieChartOptions
});
function manageCharts(){
var button = document.getElementById("chartDataButton");
var previousData = pieChart.config.data;
if(previousData == chartData1){
button.textContent = "Chart 1";
showChart2Data();
}else if(previousData == chartData2){
button.textContent = "Chart 2";
showChart1Data();
}
}
function showChart2Data(){
pieChart.config.data = chartData2;
pieChart.update();
};
function showChart1Data(){
pieChart.config.data = chartData1;
pieChart.update();
};
I've updated your code in this jsfiddle to use the destroy() function.
Using update() doesn't seem reset the animation.
Using destroy() removes the chart and then your code will recreate the new chart (and animation)
PS: Sorry for changing to jsfiddle from JS Bin. I was having troubles editing in JS Bin.
Hi guys i am using ChartJS for creating pie charts,it is pretty good.In my project i have to create many pie charts, all the charts will have the same labels and background color.In the code given below i am giving the backgroundColor and label while creating the pie charts individually.Is there any way to make label and background color common for all the charts.
<!DOCTYPE html>
<html>
<head>
<title> ChartJS tutorial </title>
<style type="text/css">
#pie-charts-wrapper{
width:1000px;
margin-left:auto;
margin-right:auto;
}
.pie-chart-wrapper{
width:500px;
height:300px;
box-sizing:border-box;
float:left;
padding:20px;
}
</style>
</head>
<body>
<div id="pie-charts-wrapper">
<div class="pie-chart-wrapper">
<canvas id="pieChart1" width="500px" height="300" ></canvas>
</div>
<div class="pie-chart-wrapper">
<canvas id="pieChart2" width="500px" height="300" ></canvas>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js" ></script>
<script type="text/javascript">
var ctx1 = document.getElementById("pieChart1");
var ctx2 = document.getElementById("pieChart2");
var data1 = {
labels: ['Signed','Not Signed'],
datasets: [{
backgroundColor:['#1abc9c','#34495e'],
data: [10, 25],
}],
};
var data2 = {
labels: ['Signed','Not Signed'],
datasets: [{
backgroundColor:['#1abc9c','#34495e'],
data: [15, 2]
}],
};
var myPieChart1 = new Chart(ctx1,{
type: 'pie',
data: data1
});
var myPieChart2 = new Chart(ctx2,{
type: 'pie',
data: data2
});
</script>
</body>
</html>
If speaking technically then yes, there is a way. Though it's not recommended, as that's not how ChartJS meant to work, therefore no built-in functionality either.
To accomplish this you would rather go for kind of a hacky solution, which is to use a plugin, like the following :
Chart.plugins.register({
beforeInit: function(chart) {
chart.data.labels = ['Signed', 'Not Signed'];
chart.data.datasets[0].backgroundColor = ['#1abc9c', '#34495e'];
}
});
* add this at the beginning of your script
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ
Chart.plugins.register({
beforeInit: function(chart) {
chart.data.labels = ['Signed', 'Not Signed'];
chart.data.datasets[0].backgroundColor = ['#1abc9c', '#34495e'];
}
});
var ctx1 = document.getElementById("pieChart1");
var ctx2 = document.getElementById("pieChart2");
var data1 = {
datasets: [{
data: [10, 25],
}]
};
var data2 = {
datasets: [{
data: [15, 2]
}]
};
var myPieChart1 = new Chart(ctx1, {
type: 'pie',
data: data1
});
var myPieChart2 = new Chart(ctx2, {
type: 'pie',
data: data2
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="pieChart1" width="500px" height="300"></canvas>
<canvas id="pieChart2" width="500px" height="300"></canvas>
I have one C# variable "value" that I want to pass into JavaScript Chartjs data object. It renders the chart but does not include the two #p values. See code source below:
cshtml file:
#{
int p1 = 43;
int p2 = 45;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
</head>
<body>
<div style="width: 400px;">
<canvas id="lineChart" width="400" height="400"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="main.js"></script>
</body>
</html>
javascript file:
var chart = document.getElementById("lineChart");
var data = {
labels: [2012, 2013, 2014, 2015, 2016, 2017],
datasets: [
{
label: "My Chart Label",
fill: false,
lineTension: 0.1,
data: ['(#p1)', '(#p2)', 50, 48, 47, 52]
}
]
};
var lineChart = new Chart(chart,
{
type: 'line',
data: data
}
);
How can I write it so that it works?
You can do
<script type="text/javascript">
var p1 = #p1, p2= #p2;
</script>
and use p1, p2.
var data = {
labels: [2012, 2013, 2014, 2015, 2016, 2017],
datasets: [
{
label: "My Chart Label",
fill: false,
lineTension: 0.1,
data: [p1, p2, 50, 48, 47, 52]
}
]
};
In this case you don't have to use hidden html fields and you can expand your code to use more field like
var tempObj ={
tempData: "",
otherData:"",
moreData: ""
}
Something like below
View:
#{
var p1 = 43;
var p2 = 45
}
<input type="hidden" id="PassingToJavaScript1" value=#p1>
<input type="hidden" id="PassingToJavaScript2" value=#p2>
JavaScript:
var p1 = document.getElementById('PassingToJavaScript1').value;
var p2 = document.getElementById('PassingToJavaScript2').value;
Use a hidden field which will hold the value and then read the hidden field's value from JavaScript.
Example:
#{
int p = 43;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
</head>
<body>
<div style="width: 400px;">
<canvas id="lineChart" width="400" height="400"></canvas>
<input type="hidden" id="someId" value="#p" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="main.js"></script>
</body>
</html>
JS
var chart = document.getElementById("lineChart");
var hiddenFieldValue = document.getElementById("someId").value;
var data = {
labels: [2012, 2013, 2014, 2015, 2016, 2017],
datasets: [
{
label: "My Chart Label",
fill: false,
lineTension: 0.1,
data: ['(hiddenFieldValue)', 45, 50, 48, 47, 52] // Not really sure how to format the data but you get main idea...
}
]
};
var lineChart = new Chart(chart,
{
type: 'line',
data: data
}
);
I am trying to test pie chart using chart.js . I get 'cannot read property of 'length' and 'initialize' in chart.js file. I tried all options and cant find the where the problem is.
code in jsfiddle
https://jsfiddle.net/n8ox2fqb/1/
pieChart.js file has following code.
var pieData = [
{
value: '25',
label: 'Java',
color: '#811BD6'
},
{
value: '10',
label: 'Scala',
color: '#9CBABA'
},
{
value: '30',
label: 'PHP',
color: '#D18177'
},
{
value : '35',
label: 'HTML',
color: '#6AE128'
}
]
var pieOptions = {};
$(document).ready(function() {
var ctxt = document.getElementById('myChart');
var myPieChart = new Chart(ctxt,{
type: 'pie',
data: pieData,
options: pieOptions
});
});
Html code
<html lang="en">
<head>
<script src="src/jquery.min.js"></script>
<script src="src/Chart.js"></script>
</head>
<Title>
Test Pie Chart
</Title>
<body>
<div>
<div>
<canvas id="myChart" width="400" height="400"></canvas>
</div>
</div>
<script src="pieChart.js"></script>
</body>
</html>
Off the top of my head I am going to say there is one obvious problem to me and that is the line
var ctxt = document.getElementById('myChart');
You want
var ctxt = document.getElementById('myChart').getContext('2d');
You may also be feeding the chart data in the wrong format. The 'data' property in your chart config object has a property called 'datasets' which is an array of objects. Check out their docs here