Related
I'm working on a project that could display sensing data on local web pages in real time with Django and I made this stream live data chart. But I don't need to this realtime x-axis ticks. I want to make the x-axis starting at zero and increasing 1 step by one second.
I think "xAxes type realtime" is the key, but I'm new to this and it's hard for me to solve alone, so I need your help.
enter image description here
<script>
var chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
function onRefresh(chart) {
var now = Date.now();
chart.data.datasets.forEach(function(dataset) {
dataset.data.push({
x: now,
y: GetData()
});
});
}
var color = Chart.helpers.color;
var config = {
type: 'line',
data: {
datasets: [{
backgroundColor: [
'rgba(100, 200, 200, 0)'
],
borderColor: chartColors.blue,
fill: false,
lineTension: 0,
borderDash: [8, 0],
data: [],
borderWidth:3,
pointRadius:0,
}]
},
options: {
legend:{
display:false
},
title: {
display: true,
text: 'Some Chart',
fontSize:20,
fontFamily:"Tahoma"
},
scales: {
xAxes: [{
ticks:{
beginAtZero: true
},
gridLines:{
display:true
},
type: 'realtime',
display:true,
position:'bottom',
realtime: {
duration: 20000,
refresh: 1000,
delay: 0,
onRefresh: onRefresh
}
}],
yAxes: [{
gridLines:{
display:true
},
scaleLabel: {
display: true,
labelString: 'value'
}
}]
},
}
};
window.onload = function() {
var ctx = document.getElementById('myChart').getContext('2d');
window.myChart = new Chart(ctx, config);
};
</script>
Is there any other way to make streaming live graph with Django, please let me know.
I solved this myself. The key was about 'xAxes ticks callback'. thank you.
My chart data is working, but I would like the Y axis to start below my lowest value and extend just a bit above the largest value and I was looking at the yAxes-> ticks-> min/max to do this. But when I add this to the options, a second second Y axis label is added with a scale of -1.0 to 1.0; I'm not sure how to get rid of that. I have attached some screen shots and some mocked up js code. Thanks
var chartData = {
labels: ['January', 'February', 'March'],
datasets: [{
type: 'line',
label: 'Dataset 1',
borderColor: 'blue',
borderWidth: 2,
fill: false,
data: [
85, 80, 75
]
}, {
type: 'bar',
label: 'Dataset 2',
backgroundColor: 'red',
data: [
90, 85, 80
],
borderColor: 'white',
borderWidth: 2
}, {
type: 'bar',
label: 'Dataset 3',
backgroundColor: 'green',
data: [
95, 90, 85
]
}]
};
var ctx = document.getElementById('canvas').getContext('2d');
window.myMixedChart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
title: {
display: true,
text: 'A Funky Label'
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: false
}],
yAxes: [
{
ticks: {
max: 100,
min: 50,
stepSize: 10,
callback: function (value, index, values) {
return value + " HP";
}
}
},
{
stacked: false
}
]
},
layout: {
padding: {
left: 10,
right: 10,
top: 0,
bottom: 0
}
}
}
});
}
I discovered the answer:
I was trying to determine if I wanted a stacked bar chart or regular bar chart with multiple series chart. Anyway, after deciding to stick with the regular bar chart with multiple series I removed this from my options section:
stacked: false
Once removed the second Y axis disappeared
I need build 2 lines charts with different sets of labels
here is example https://jsfiddle.net/o5dtzwn1/
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: [1, 2, 3, 4, 5],
labels: [
'green',
'yellow',
'red',
'purple',
'blue',
]
}, {
data: [6, 7, 8],
labels: [
'a',
'b',
'c'
],
}, ]
},
options: {
responsive: true,
legend: {
display: false,
},
}
});
How can I do this?
Ok, that could help you, Now I have made different line chart with four different data with different counts.
Here i have made three label array and attached to tick callback function randomly.
You can choose whichever apropriate, but make sure bigger atrray lenth should come
in to data: { labels: label1}.
Check link enter link description here
var ctx = document.getElementById("myChart");
var label1 = ["aa", "bb", "cc", "dd", "ee", "ff", "gg"];
var label2 = ["1900", "1950", "1999", "2050"];
var label3 = ["AA", "BB", "CC", "DD", "EE"];
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: label1,
datasets: [{
label: "Europe",
type: "line",
borderColor: "#8e5ea2",
data: [408, 547, 675, 934],
fill: false
}, {
label: "Africa",
type: "line",
borderColor: "magenta",
data: [133, 221, 783, 2478, 1900, 1200],
fill: false
}, {
label: "Europe",
type: "line",
borderColor: "green",
data: [408, 547, 675, 734, 200],
fill: false
}, {
label: "Africa",
type: "line",
borderColor: "red",
//backgroundColorHover: "#3e95cd",
data: [133, 221, 783, 2478],
fill: false
}]
},
options: {
title: {
display: true,
text: 'Population growth (millions): Europe & Africa'
},
legend: {
display: false
},
scales: {
xAxes: [{
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
if (label3[index] === undefined) {
label3[index] = "no data ";
}
if (label2[index] === undefined) {
label2[index] = "no data ";
}
return "l3 " + label3[index] + "l2 " + label2[index] + ' $' + value;
}
}
}]
}
}
});
//use following code that might helpful
var ctx = $("#myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
datasets: [{
data: [86,114,106,106,107,111,133,221,783,2478],
label: "Africa",
borderColor: "#3e95cd",
fill: false
}, {
data: [282,350,411,502,635,809,947,1402,3700,5267],
label: "Asia",
borderColor: "#8e5ea2",
fill: false
}, {
data: [168,170,178,190,203,276,408,547,675,734],
label: "Europe",
borderColor: "#3cba9f",
fill: false
}, {
data: [40,20,10,16,24,38,74,167,508,784],
label: "Latin America",
borderColor: "#e8c3b9",
fill: false
}, {
data: [6,3,2,2,7,26,82,172,312,433],
label: "North America",
borderColor: "#c45850",
fill: false
}
]
},
options: {
title: {
display: true,
text: 'World population per region (in millions)'
}
}
});
I think this one as you mention have different label and differnt data and count
// here is link https://codepen.io/hiren65/pen/ydMZaJ
var ctx = $("#myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: [1, 2, 6, 11, 5],
type: "line",
borderColor: "red",
labels: [
'green',
'yellow',
'red',
'purple',
'blue',
]
}, {
data: [6, 7, 8],
type: "line",
borderColor: "#123ea2",
labels: [
'a',
'b',
'c'
],
}, {
data: [6, 3, 8,10,11,4],
type: "line",
borderColor: "#6cc",
labels: [
'a1',
'b1',
'c1',
'e1'
],
},]
},
options: {
responsive: true,
legend: {
display: true,
},
}
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>
<body>
<script>
<!--bar stacked-->
var data2 = {
CC: [{
code: '123ASD',
labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
datasets: [
{
label: 'AAA',
backgroundColor: "rgba(255,0,0,1)",
data: [32,41,21,78,0,0,0]
},
{
label: 'BBB',
backgroundColor: "rgba(0,255,0,1)",
data: [10,80,12,70,65,44,18]
},
{
label: 'CCC',
backgroundColor: "rgba(0,0,205,1)",
data: [915,400,233,398,334,766,1071]
},
]}
,
{
code: 'ASD123',
labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
datasets: [
{
label: 'AAA',
backgroundColor: "rgba(255,0,0,1)",
data: [55,22,40,2,0,0,0]
},
{
label: 'BBB',
backgroundColor: "rgba(0,255,0,1)",
data: [10,2,100,0,17,55,74]
},
{
label: 'CCC',
backgroundColor: "rgba(0,0,205,1)",
data: [232,555,800,900,723,1001,942]
},
]
},
]
};
data2.CC.forEach( function(i, item){
document.body.innerHTML += '<canvas id="'+i.code+'"></canvas>'
var ctx2 = document.getElementById(i.kodu).getContext('2d');
window.myBar = new Chart(ctx2, {
type: 'bar',
data: data2.AA[0],
options: {
title: {
display: true,
text: i.code
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
});
</script>
</body>
</html>
when I run I get this error: Uncaught TypeError: Cannot read property 'currentStyle' of null and my first chart can't load
I try Uncaught TypeError: Cannot read property 'currentStyle' of null in ChartJS but my first chart again dont load
Is there anyone help?
You had a couple of issues:
Chart reference was being overridden by the last chart in the collection
A few references to variables did not exist from your original source dump
Chart data source reference needed to be changed
document.addEventListener('DOMContentLoaded', function(){
var chartData = {
CC: [{
code: '123ASD',
labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
datasets: [{
label: 'AAA',
backgroundColor: "rgba(255,0,0,1)",
data: [32,41,21,78,0,0,0]
},{
label: 'BBB',
backgroundColor: "rgba(0,255,0,1)",
data: [10,80,12,70,65,44,18]
},{
label: 'CCC',
backgroundColor: "rgba(0,0,205,1)",
data: [915,400,233,398,334,766,1071]
}]
},{
code: 'ASD123',
labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
datasets: [{
label: 'AAA',
backgroundColor: "rgba(255,0,0,1)",
data: [55,22,40,2,0,0,0]
},{
label: 'BBB',
backgroundColor: "rgba(0,255,0,1)",
data: [10,2,100,0,17,55,74]
},{
label: 'CCC',
backgroundColor: "rgba(0,0,205,1)",
data: [232,555,800,900,723,1001,942]
}]
}]
};
chartData.CC.forEach(function(data, index){
var canvas = document.createElement('canvas'),
chartId = 'chart' + data.code;
canvas.id = chartId;
document.body.appendChild(canvas);
var context = document.getElementById(chartId).getContext('2d');
window[chartId] = new Chart(context, {
type: 'bar',
data: data,
options: {
title: {
display: true,
text: data.code
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
});
});
Stack snippet is throwing a script error because of chart.js so I created a Codepen
You charts are not being loaded because your code should be item instead of data2.AA[0]. Also, you do not have any property with name kodu in your data object. Check out working version below:
var data2 = {
CC: [{
code: '123ASD',
labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
datasets: [{
label: 'AAA',
backgroundColor: "rgba(255,0,0,1)",
data: [32, 41, 21, 78, 0, 0, 0]
},
{
label: 'BBB',
backgroundColor: "rgba(0,255,0,1)",
data: [10, 80, 12, 70, 65, 44, 18]
},
{
label: 'CCC',
backgroundColor: "rgba(0,0,205,1)",
data: [915, 400, 233, 398, 334, 766, 1071]
},
]
},
{
code: 'ASD123',
labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
datasets: [{
label: 'AAA',
backgroundColor: "rgba(255,0,0,1)",
data: [55, 22, 40, 2, 0, 0, 0]
},
{
label: 'BBB',
backgroundColor: "rgba(0,255,0,1)",
data: [10, 2, 100, 0, 17, 55, 74]
},
{
label: 'CCC',
backgroundColor: "rgba(0,0,205,1)",
data: [232, 555, 800, 900, 723, 1001, 942]
},
]
},
]
};
data2.CC.forEach(function(item, arr) {
var chartId = item.code;
var canvas = document.createElement("Canvas");
var ctx = canvas.getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: item,
options: {
title: {
display: true,
text: chartId
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
document.body.appendChild(canvas);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
In Chartjs I have two plots, as shown here:
var config = {
type: 'line',
data: {
labels: [
"2017-07-03T01:05:00+0100",
....
],
datasets: [
{
label: "Consumption",
fill: 'origin',
pointRadius: 0,
borderColor: "#0000ff",
backgroundColor: "rgba(255,10,13,255)",
data: [
0.015625,
0.0199861111111,
...
],
}
,
{
fill: 'origin',
label: "PV",
pointRadius: 0,
borderColor: "#ebf909",
backgroundColor: "rgba(29,241,13,210)",
data: [
0.0,
.....
],
}
]
},
options: {
responsive: true,
title:{
display:true,
text:"Chart.js Line Chart - Stacked Area"
},
tooltips: {
mode: 'index',
},
hover: {
mode: 'index'
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time'
}
}],
yAxes: [{
stacked: false,
scaleLabel: {
display: true,
labelString: 'kWh'
}
}]
}
}
};
var ctx = document.getElementById("canvas").getContext("2d");
var myChart = new Chart(ctx, config);
Is there any way I can make the green plot show through the red one in places where the latter completely obscures the former?
You need to set fill property to false for the first dataset (the red one), to make it transparent.
datasets: [{
label: "Consumption",
fill: false,
pointRadius: 0,
borderColor: "#0000ff",
backgroundColor: "rgba(255,10,13,255)",
...
or, you can also reduce the opacity of background color, like so ...
backgroundColor: "rgba(255, 10, 13, 0.1)"
Here is the working codepen