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
Related
Im trying to learn how to use chart.js but I cant get it to work with all those exemples out there. I have a table in mysql with temperature-data and dates.
Managed to format it with json_encode in getdata.php, like this (small example);
[
{
"date":"2018-04-01 00:00:02",
"temp":"1.2"
},
{
"date":"2018-04-01 01:00:50",
"temp":"1.0"
}
]
I have been struggling with it for a week now, trying all sorts of tutorials and examples with no luck :(
Can someone please show me how to display this data as a simple linechart???
Anyone know of a example with similar data?
Try this:
HTML:
<!-- Importing Chart.js and creating our canvas to draw the line. -->
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
</body>
</html>
JAVASCRIPT:
// Our sample data.
var myDATA = [
{
"date":"2018-04-01 00:00:02",
"temp":"1.2"
},
{
"date":"2018-04-01 01:00:50",
"temp":"1.0"
}
];
// Grab the canvas.
var ctx = document.getElementById("myChart").getContext('2d');
// Paint to canvas a line chart with some options.
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [myDATA[0].date, myDATA[1].date],
datasets: [{
label: 'TEMPERATURES',
data: [myDATA[0].temp, myDATA[1].temp]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
https://jsfiddle.net/j8h6qumq/10/
ok, it works now...
After some google I found out that I had to execute the script after the canvas-tag.
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>
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>
I am using PhoneGap to build a mobile app and one of the pages needs to display a chart and I am using Chart.js. I am using the following code but the chart doesn't appear and gives me an empty display for the page. The alert shows when I go to my chart page.
Is there any issues with displaying charts for PhoneGap applications for chart.js?
index.html
<article>
<canvas id="myChart" width="400" height="400"></canvas>
</article>
<script src="js/Charts/Chart.min.js"></script>
<script src="js/chartScript.js"></script>
chartScript.js
$(document).on("pageinit", "#chart", function () {
alert("Able to enter");
var pieData = [
{
value: 25,
label: 'Java',
labelColor: 'black',
color: '#811BD6'
},
{
value: 10,
label: 'Scala',
color: '#9CBABA'
},
{
value: 30,
label: 'PHP',
color: '#D18177'
},
{
value: 35,
label: 'HTML',
color: '#6AE128'
}
];
var context = document.getElementById('myChart').getContext('2d');
var skillsChart = new Chart(context).Pie(pieData);
});
I've tried similar examples through stackoverflow as well as Highcharts Support, however still cannot get a graph to display properly. Trying to display a spline graph with data from a csv file with format hour,temperature as shown below in an example:
22,84
23,83
00,82
01,81
02,79
03,77
04,75
Here is the currently html/javascript I have:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var time = [];
var temp = [];
$.get('forecast.csv', function(data) {
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
time.push(parseInt(items[0]));
temp.push(parseInt(items[1]));
});
});
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
title: {
text: 'Temperature Forecast'
},
xAxis: {
title: {
text: 'Hour'
},
categories: time
},
yAxis: {
title: {
text: 'Temperature'
}
},
series: [{
data: temp
}]
};
var chart = new Highcharts.Chart(options);
});
</script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px"></div>
</body>
My graph displays, however there is no data. Any ideas?
Thanks..
You need to add a two dimensional array as data. You can declare a global variable and add the data to that varible.
var chartData=[]
var dataTemp = new Array(parseInt(items[0]), parseInt(items[1]));
chartData.push(dataTemp);
and
series: [{
data: chartData
}]