I have this great code working here where I load the data in from an external file called test.csv.
Everything works great until I try to update the chart.js library link.
Can anyone tell me why this code doesn't work with more current versions of chart.js?
I want to update it so that I can install the plugin that lets you show the charts values. Alternatively some code that would facilitate this would work great as well!
Appreciate any help!
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Data project</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="wrapper">
<h1>MY CHART</h1>
<h2>This is the subhead for my chart </h2>
<canvas id="myChart" width="350" height="250" style="background-color:white;"></canvas>
</div>
<script>
window.addEventListener('load', setup);
async function setup() {
var ctx = document.getElementById('myChart').getContext('2d');
var dollar = await getData();
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: dollar.years,
datasets: [
{
label: 'Voter support (%)',
data: dollar.vals,
backgroundColor: [
'#134D85',
'#134D85',
'#134D85',
'#134D85',
'#134D85',
],
}]
},
options: {
layout: {
padding: {
left: 0,
right: 0,
top: 8,
bottom: 0
}
},
responsive: true,
title: {
display: false
},
legend: {
display: true,
position: 'top',
usePointStyle: true,
padding: 1,
labels: {
boxWidth: 15,
}
},
scales: {
yAxes: [{
gridlines: {
display: true,
color: '#ffffff',
zeroLineColor: '#ffffff',
}
}],
xAxes: [{
gridLines: {
display: true,
drawOnChartArea: false
},
}],
}
}
});
}
async function getData() {
// const response = await fetch('testdata.csv');
var response = await fetch('data/test.csv');
var data = await response.text();
data = data.replace(/"/g, "");
var years = [];
var vals = [];
var rows = data.split('\n').slice(1);
rows = rows.slice(0, rows.length - 1);
rows = rows.filter(row => row.length !== 0)
rows.forEach(row => {
var cols = row.split(",");
years.push(cols[0]);
vals.push(0 + parseFloat(cols[1]));
});
console.log(years, vals);
return { years, vals };
}
</script>
</body>
</html><!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" />
<title>Coding Train: Data and APIs Project 1</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="wrapper">
<h1>MY CHART</h1>
<h2>This is the subhead for my chart </h2>
<canvas id="myChart" width="350" height="250" style="background-color:white;"></canvas>
</div>
<script>
// Data from: https://data.giss.nasa.gov/gistemp/
// Mean from: https://earthobservatory.nasa.gov/world-of-change/DecadalTemp
window.addEventListener('load', setup);
async function setup() {
var ctx = document.getElementById('myChart').getContext('2d');
var dollar = await getData();
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: dollar.years,
datasets: [
{
label: 'Voter support (%)',
data: dollar.vals,
backgroundColor: [
'#134D85',
'#134D85',
'#134D85',
'#134D85',
'#134D85',
],
}]
},
options: {
layout: {
padding: {
left: 0,
right: 0,
top: 8,
bottom: 0
}
},
responsive: true,
title: {
display: false
},
legend: {
display: true,
position: 'top',
usePointStyle: true,
padding: 1,
labels: {
boxWidth: 15,
}
},
scales: {
yAxes: [{
gridlines: {
display: true,
color: '#ffffff',
zeroLineColor: '#ffffff',
}
}],
xAxes: [{
gridLines: {
display: true,
drawOnChartArea: false
},
}],
}
}
});
}
async function getData() {
// const response = await fetch('testdata.csv');
var response = await fetch('data/test.csv');
var data = await response.text();
data = data.replace(/"/g, "");
var years = [];
var vals = [];
var rows = data.split('\n').slice(1);
rows = rows.slice(0, rows.length - 1);
rows = rows.filter(row => row.length !== 0)
rows.forEach(row => {
var cols = row.split(",");
years.push(cols[0]);
vals.push(0 + parseFloat(cols[1]));
});
console.log(years, vals);
return { years, vals };
}
</script>
</body>
</html>```
For a start next time might be a good idea to read the documentation and the migration guide.
Few things that are at least wrong:
Link name has changed to lower case so 2.9.4/Chart.js -> 3.5.0/chart.js
Scales have changed from 2 arrays to objects for each scale:
options: {
scales: {
x: {
// config for default x scale
},
x2: {
// config for second x scale
},
y: {
// config for default y scale
},
}
}
title and legend config have been moved to the plugins section so options.title -> options.plugins.title and options.legend -> options.plugins.legend.
Alternativly you could also just use an older release of the datalabels plugin that has been written for V2
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/1.0.0/chartjs-plugin-datalabels.js"></script>
Related
I want to that the Chart start at 0. But it takes always the lower value to start.
I already tried a few things but nothing works.
It never takes the settings done in de options Part of de javascript part. So i dont know what the issue is. It never starts at 0. But this is what i want to.
Please help. Thank you very much :)
Looks currently like this: https://school.luis-luescher.com/m242/moin/index.php
<!DOCTYPE html>
<html>
<head>
<title>Database</title>
<style type="text/css">
BODY {
width: 550PX;
}
#chart-container {
width: 100%;
height: auto;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.4/dist/Chart.min.js"></script>
</head>
<body>
<div id="chart-container">
<canvas id="graphCanvas"></canvas>
</div>
<script>
$(document).ready(function() {
showGraph();
});
function showGraph() {
{
$.post("https://school.luis-luescher.com/m242/moin/data.php",
function(data) {
console.log(data);
var trytime = [];
var count = [];
for (var i in data) {
trytime.push(data[i].trytime);
count.push(data[i].count);
}
var chartdata = {
labels: trytime,
datasets: [{
label: 'Erfolgreiche Authentifizerungen',
backgroundColor: '#8846f1',
borderColor: '#a446f1',
hoverBackgroundColor: '#CCCCCC',
hoverBorderColor: '#666666',
borderWidth: 1,
data: count,
}],
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
}
var graphTarget = $("#graphCanvas");
var barGraph = new Chart(graphTarget, {
type: 'bar',
data: chartdata
});
});
}
}
</script>
</body>
</html>
Your Options object must be outside chartData.
var barGraph = new Chart(graphTarget, {
type: 'bar',
data: chartdata,
options: options
});
I have a stacked bar graph where I want to show the proportion of projects for which our qualitative analyst needs to complete the thematic coding process. However, the visitors to the webpage won't necessarily know the context, but will just want some details in tooltips. I have two categories: (1) Total projects and (2) Coded projects. In a new line for the Total projects tooltips under "Remaining Projects: 170" I want "Description: The remainder of projects that have not yet been qualitatively coded." Similarly for "Coded Projects: 70" I want a new line to show "Description: The number of projects that have been qualitatively coded."
The last working version of my stacked bar graph is here: https://codepen.io/tenebris_silentio/pen/ZEWzXyr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portfolio Review Overview</title>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
<div class="container">
<div class="row my-3">
<div class="col">
<p class="sansserif"><br>
</div>
</div>
<div class="col-md-6 py-1">
<div class="card" style="width: 36rem;">
<div class="card-body">
<canvas id="chBar"></canvas>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<script>
// chart colors
var colors = ['#007bff','#28a745','#333333','#c3e6cb','#dc3545','#6c757d'];
/* bar chart */
var ctx = document.getElementById('chBar');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Proportion of Coded Projects'],
datasets: [
{
label: ['Coded Projects'],
data: [70],
info: [
['This refers to projects that have not been qualitatively coded using the TDF.'],
backgroundColor: '#D6E9C6',
}],
{
label: 'Remaining Projects',
data: [170],
backgroundColor: colors.slice(0,1),
info: [
['This refers to total number of projects left to code.'],
},
]
},
options: {
tooltips: {
callbacks: {
title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
label: (tooltipItems, data) => 'Count: ' + data.datasets[0].data[tooltipItems.index],
footer: (tooltipItems, data) => ['', 'Description:'].concat(data.datasets[0].info[tooltipItems[0].index])
}
}
scales: {
xAxes: [{ stacked: true }],
yAxes: [{ stacked: true }]
}
}
});
</script>
Your tooltips.callbacks should look as follows:
tooltips: {
callbacks: {
title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
label: (tooltipItems, data) => data.datasets[tooltipItems.datasetIndex].label + ' ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index],
footer: (tooltipItems, data) => ['', 'Description:'].concat(data.datasets[tooltipItems[0].datasetIndex].info)
}
}
Please have a look at your amended code below:
var colors = ['#007bff', '#28a745', '#333333', '#c3e6cb', '#dc3545', '#6c757d'];
var ctx = document.getElementById('chBar');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Proportion of Coded Projects'],
datasets: [{
label: 'Coded Projects',
data: [70],
backgroundColor: '#D6E9C6',
info: [
['This refers to projects that have not'],
['been qualitatively coded using the TDF.']
]
},
{
label: 'Remaining Projects',
data: [170],
backgroundColor: colors.slice(0, 1),
info: [
['This refers to total number'],
['of projects left to code.']
]
}
]
},
options: {
tooltips: {
callbacks: {
title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
label: (tooltipItems, data) => data.datasets[tooltipItems.datasetIndex].label + ' ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index],
footer: (tooltipItems, data) => ['', 'Description:'].concat(data.datasets[tooltipItems[0].datasetIndex].info)
}
},
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
});
canvas {
max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chBar"></canvas>
My ChartJS chart is not displaying all the data. This is the closest question on SO to my problem. Implementing the answer to this question did not help (I tried both [{display: false}] and [{display: true}]).
I am a novice at chartjs having only started working with it some ~5 days ago. Any help or advice would be appreciated.
Basically, I am writing a chart that takes data collected by a Raspberry Pi and plots it.
<!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" />
<title>Harp comfort</title>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
</head>
<body>
<h1>Temperature data</h1>
<canvas id="myChart"></canvas>
<script>
// Data from: Raspberry Pi Hat
window.addEventListener('load', setup);
var ops = {
scales: {
xAxes: [{
display: false
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
};
async function setup() {
const ctx = document.getElementById('myChart').getContext('2d');
const dataTemp = await getData();
const myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
label: 'Temperature',
data: dataTemp.temp,
fill: false,
borderColor: 'rgba(255, 99, 132, 1)',
backgroundColor: 'rgba(255, 99, 132, 0.85)',
borderWidth: 2
}
]
},
options: ops
});
}
async function getData() {
const response = await fetch('./sample.csv');
const data = await response.text();
const temp = [];
const rows = data.split('\n').slice(1);
rows.forEach(row => {
const col = row.split(',');
temp.push(parseFloat(col[0]))
//console.log(col[0]) //for debugging purpose
});
return { temp };
}
//getData(); for debugging purpose
</script>
</body>
</html>
The CSV data (sample.csv) is available via this PasteBin page
I am answering my own question.
I was able to solve this problem by ensuring that the CSV data had 2 columns. A single column of data does not work. A two column data file (PasteBin Link) along with the modified code works fine:
<!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" />
<title>Harp Temperature and RH</title>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
</head>
<body>
<h1>Harp comfort</h1>
<canvas id="myChart" width="400" height="200"></canvas>
<script>
// Data from: Raspberry Pi Hat
window.addEventListener('load', setup);
var ops = {
scales: {
xAxes: [{
display: false
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
};
async function setup() {
const ctx = document.getElementById('myChart').getContext('2d');
const dataTemp = await getData();
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: dataTemp.timestamp,
datasets: [
{
label: 'Temperature',
data: dataTemp.temp,
fill: false,
borderColor: 'rgba(255, 99, 132, 1)',
backgroundColor: 'rgba(255, 99, 132, 0.85)',
borderWidth: 2
}
]
},
options: ops
});
}
async function getData() {
const response = await fetch('./sample.csv');
const data = await response.text();
const timestamp = [];
const temp = [];
const rows = data.split('\n').slice(1);
rows.forEach(row => {
const col = row.split(',');
timestamp.push(col[0])
temp.push(parseFloat(col[1]))
//console.log(col[0]) //for debugging purpose
});
return { temp, timestamp };
}
//getData(); for debugging purpose
</script>
</body>
</html>
I would love it if more refined answers (than my novice solution!) be posted.
I am using Chart.js and this API to create a line graph of covid-19 cases in Australia.
However, the API data is not loading in the chart until I do something like inspect an element on the page or resize the window.
Here is my JS file:
window.onload = function() {
let dates = [];
let confirmedCases = [];
let confirmedRecovered = [];
let confirmedDeaths = [];
function addArrayFunc(date, confirmed, recovered, deaths) {
dates.push(date);
confirmedCases.push(confirmed);
confirmedRecovered.push(recovered);
confirmedDeaths.push(deaths);
}
fetch("https://pomber.github.io/covid19/timeseries.json")
.then(response => response.json())
.then(cases => {
cases["Australia"].forEach(({
date,
confirmed,
recovered,
deaths
}) =>
addArrayFunc(date, confirmed, recovered, deaths)
)
})
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: dates,
datasets: [{
label: 'Confirmed',
borderColor: 'pink',
backgroundColor: 'pink',
fill: 'false',
data: confirmedCases
},
{
label: 'Recovered',
borderColor: 'blue',
backgroundColor: 'blue',
fill: 'false',
data: confirmedRecovered
},
{
label: 'Deaths',
borderColor: 'green',
backgroundColor: 'green',
fill: 'false',
data: confirmedDeaths
}
]
},
options: {
responsive: true,
title: {
display: true,
text: 'Covid-19 Cases in Australia'
},
}
});
}
Here is my html file:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Confirmed Covid-19 cases in Australia</title>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
width: 75%;
}
</style>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
</html>
I believe I am creating the chart before the data has arrived from the URL but I have no idea have to rectify that. Is this something async/await or watch could fix? How would I go implementing that?
Any help would be greatly appreciated.
Since fetch makes an asynchronous call, you need to create your chart once the response is received. Therefore, simply place the chart creation code inside .then and it will work as shown below.
window.onload = function() {
let dates = [];
let confirmedCases = [];
let confirmedRecovered = [];
let confirmedDeaths = [];
function addArrayFunc(date, confirmed, recovered, deaths) {
dates.push(date);
confirmedCases.push(confirmed);
confirmedRecovered.push(recovered);
confirmedDeaths.push(deaths);
}
fetch("https://pomber.github.io/covid19/timeseries.json")
.then(response => response.json())
.then(cases => {
cases["Australia"].forEach(({
date,
confirmed,
recovered,
deaths
}) =>
addArrayFunc(date, confirmed, recovered, deaths)
)
new Chart(document.getElementById('myChart'), {
type: 'line',
data: {
labels: dates,
datasets: [{
label: 'Confirmed',
borderColor: 'pink',
backgroundColor: 'pink',
fill: 'false',
data: confirmedCases
},
{
label: 'Recovered',
borderColor: 'blue',
backgroundColor: 'blue',
fill: 'false',
data: confirmedRecovered
},
{
label: 'Deaths',
borderColor: 'green',
backgroundColor: 'green',
fill: 'false',
data: confirmedDeaths
}
]
},
options: {
responsive: true,
title: {
display: true,
text: 'Covid-19 Cases in Australia'
},
}
});
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>
I'm trying to make a chart like this screenshot.
Now i'm using chartjs as given below:-
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>area > boundaries | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="https://www.chartjs.org/samples/latest/style.css">
<script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>
<script src="https://www.chartjs.org/samples/latest/charts/area/analyser.js"></script>
</head>
<body>
<div class="content">
<div class="wrapper col-2"><canvas id="chart"></canvas></div>
</div>
<script>
var presets = window.chartColors;
var utils = Samples.utils;
var inputs = {
min: 0,
max: 100,
count: 8,
decimals: 2,
continuity: 1
};
function generateData(config) {
return utils.numbers(Chart.helpers.merge(inputs, config || {}));
}
function generateLabels(config) {
return utils.months(Chart.helpers.merge({
count: inputs.count,
section: 3
}, config || {}));
}
var options = {
maintainAspectRatio: false,
spanGaps: false,
elements: {
line: {
tension: 0.000001
}
},
plugins: {
filler: {
propagate: false
}
},
scales: {
xAxes: [{
ticks: {
autoSkip: false,
maxRotation: 0
}
}]
}
};
[false,'start'].forEach(function(boundary, index) {
utils.srand(8);
new Chart('chart', {
type: 'line',
data: {
labels: generateLabels(),
datasets: [{
backgroundColor: utils.transparentize(presets.red),
borderColor: presets.red,
data: generateData(),
label: 'Dataset',
fill: boundary
}]
},
options: Chart.helpers.merge(options, {
title: {
text: 'fill: ' + boundary,
display: true,
}
})
});
});
</script>
</body>
</html>
There is issue this is not exactly as screenshot, how can i make it same as in screenshot?
You are using the charts correctly, and you are using the appropriate type: line. All you have to do to show a chart exactly as the image's is set the right values. I hope this gives you an idea
var presets = window.chartColors;
var utils = Samples.utils;
var inputs = {
min: 0,
max: 100,
count: 8,
decimals: 2,
continuity: 1
};
function generateData(config) {
return utils.numbers(Chart.helpers.merge(inputs, config || {}));
}
function generateLabels(config) {
return utils.months(Chart.helpers.merge({
count: inputs.count,
section: 3
}, config || {}));
}
var options = {
maintainAspectRatio: false,
spanGaps: false,
elements: {
line: {
tension: 0.000001
}
},
plugins: {
filler: {
propagate: false
}
},
scales: {
xAxes: [{
ticks: {
autoSkip: false,
maxRotation: 0
}
}]
}
};
[false, 'origin', 'start', 'end'].forEach(function(boundary, index) {
const canvas = document.getElementById('chart-' + index);
if(canvas)
{
utils.srand(8);
var ctx = canvas.getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: generateLabels(),
datasets: [{
backgroundColor: utils.transparentize(presets.red),
borderColor: presets.red,
//data: generateData(),
data: [0, 0, 40, 0,0, 50, 0, 0, 0],
label: 'Dataset',
fill: boundary
}]
},
options: Chart.helpers.merge(options, {
title: {
text: 'fill: ' + boundary,
display: true,
}
})
});
}
});
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>area > boundaries | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="https://www.chartjs.org/samples/latest/style.css">
<script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>
<script src="https://www.chartjs.org/samples/latest/charts/area/analyser.js"></script>
</head>
<body>
<div class="content">
<div class="wrapper col-2"><canvas id="chart-2"></canvas></div>
</div>
</body>
</html>