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.
Related
I'm working on Char.js version 3.9.1 and I have a chart which display data (y value) along the time (x value). Everything seems to be working fine.
However, when I add 'type' property to x axis in order to make the x scale to have daily unit, the chart doesn't show anything. I have tried running code in jsfiddle and the console shows error "Uncaught Error: This method is not implemented: Check that a complete date adapter is provided." I tried searching the internet and still not find any solution.
Here is my code (I have to add comment over type: 'line' to make the chart to display).
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<canvas id="mychart"></canvas>
Javascript
let data = [12, 14, 13, 18, 21, 22, 25];
let labels = ["2017-01-20", "2017-01-22", "2017-01-24", "2017-01-26", "2017-01-28", "2017-01-30", "2017-02-01"];
let options = {
scales: {
x: {
type: 'time', //this line make the chart disappear
time: {
unit: 'day'
}
},
y0: {
ticks: {
min: 0
}
},
},
};
let chartData = {
labels: labels,
datasets: [{
data: data,
label: 'Amount of Stuff',
backgroundColor: '#035e7b',
}]
};
let ctx = document.getElementById('mychart').getContext('2d');
new Chart(ctx, {
data: chartData,
type: 'line',
options: options,
});
From the docs:
Date Adapters
The time scale requires both a date library and a
corresponding adapter to be present. Please choose from the
available adapters.
So you can change your HTML like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/moment#^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment#^1"></script>
<canvas id="mychart"></canvas>
and then you'll be able to use type: "time" for x axis.
I have several charts on a production tracking page, I'd like to avoid this effect that makes tracking inconsistent at first glance. Is there any option in chart.js for that ? If not, what is the best way to resolve this problem ?
I tried the option "bar percentage : 0.2", but the problem is it resolves only the width, not the height, and it causes another problem where there are several datas (it's ugly) :
To achieve this you will need to know the max value of your first chart. If you know this you can set the the suggestedMax value in the ticks options for the yAxes to that value.
var options = {
type: 'bar',
data: {
labels: ["Red"],
datasets: [{
label: '# of Votes',
data: [2],
borderWidth: 1,
}]
},
options: {
scales: {
yAxes: [{
ticks: {
suggestedMax: 25
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>
I am using below code to populate slice values in a pie chart using JS and it's correctly working but
I am observing another problem as these values are getting populated only once and when I reload the charts it's getting disappeared. Now let's say if I close the browser and open again or change the browser it will show values again. But after doing multiple force refresh Ctrl+F5 then also it's not showing the values. Could you please help?
Please note I am having more than 3 pie charts on the same page with a different id.
var canvas = document.getElementById('myChart');
new Chart(canvas, {
type: 'pie',
data: {
labels: ['January', 'February', 'March'],
datasets: [{
data: [50445, 33655, 15900],
backgroundColor: ['#FF6384', '#36A2EB','#FFCE56']
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
plugins: {
labels: {
render: 'percentage',
fontColor: ['green', 'white', 'red'],
precision: 2
}
},
}
});
<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"></canvas>
I am using react to render 2 charts, a line chart and bar chart stack vertically. When I scroll to look at barChart below, after each update, chartjs, forces my scroll to (0,0). I have seen some implementation that does not move the scroll's position after each update.
Please help
<canvas id="lineChart" onLoad={ load() }>
Your browser does not support canvas, please upgrade to latest browser
</canvas>
<canvas id="barChart" onLoad={ load() }>
Your browser does not support canvas, please upgrade to latest browser
</canvas>
//to load chart.js
var myChart = new Chart($("#barChart")[0], {
type: 'bar',
data: {
labels: props.labels,
datasets: [{
label: props.label,
data: props.data,
backgroundColor: props.labels.map(l => props.color) ,
borderColor: props.labels.map(l => props.borderColor) ,
borderWidth: 0.01
}]
},
options: {
scales: {
yAxes: [{
ticks: {beginAtZero: true}
}]
}
}
});
I had a similar issue when destroying a chart and recreating it. My workaround was to get the scroll position before destruction and reapply it after creation. For example in jQuery:
var pos = $(document).scrollTop();
if (chart != undefined)
chart.destroy();
chart = new Chart(ctx, chartOptions);
$(document).scrollTop(pos);
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