I'm trying to periodically update a chart. The data is making into the dataset but I can't get it to draw the chart. What am I doing wrong?
const ctx = document.querySelector('#apichart canvas').getContext('2d');
const apichart = new Chart(ctx, {
type: 'line',
data: {datasets:[{
label:'Pressure',
data: [1025,1000],
fill:false,
borderColor: 'rgb(75, 192, 192)',
tension:0.1
}]},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
setInterval(function run(){
apichart.data.datasets[0].data.push(1025 * Math.random());
apichart.update();
}, 10000);
#apichart{background:#777; position:absolute; top:0; right:0; bottom:0; left:0;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
<div id="apichart">
<canvas></canvas>
</div>
I think this problem related to labels, so I have added labels array and update them in setInterval each time and it works.
const ctx = document.querySelector('#apichart canvas').getContext('2d');
const apichart = new Chart(ctx, {
type: 'line',
data: {labels: [1, 2],
datasets:[{
label:'Pressure',
data: [1025,1000],
fill:false,
borderColor: 'rgb(75, 192, 192)',
tension:0.1
}]},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
setInterval(function run(){
apichart.data.labels.push(Math.random());
apichart.data.datasets[0].data.push(1025 * Math.random());
apichart.update();
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
<div id="apichart">
<canvas></canvas>
</div>
Related
I use chart.js for creating this chart:
I want to change the position of two legends( legend1 and legend2), but it did not work!
NOTE: all features work correctly, but problem is that I can't change position of legends:
the version of CDN chart.js :
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.7.1/dist/chart.min.js"></script>
I can't understand, what is the problem? Is it because of it's CDN package version?
my pure js code:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.7.1/dist/chart.min.js"></script>
</head>
<body>
<canvas id="myChart" width="778" height="433"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
data: {
labels: ['۱۴۰۰/۰۱/۰۱', '۱۴۰۰/۰۱/۰۲', '۱۴۰۰/۰۱/۰۳', '۱۴۰۰/۰۱/۰۴', '۱۴۰۰/۰۱/۰۵', '۱۴۰۰/۰۱/۰۶'],
datasets: [{
type: 'line',
label: 'legend1',
data: [6, 5.5, 4, 7, 5.4, 5.8],
fill:false,
borderColor: 'rgb(14, 156, 255)',
tension:0 },
{
type: 'line',
label: 'legend2',
data: [6.2, 5.7, 3.8, 7.2, 5.2, 5.9],
fill:false,
borderColor: 'rgb(22, 185, 156)',
tension:0
} ]
},
options: {
legend: {
position: 'bottom',
}, // end: legend
scales: {
y: {
beginAtZero: true,
display: false }// end: y
,x: {
grid: {
borderDash: [6, 5],
lineWidth: 1,
color:'#CCCCCC' }// end grid
}//end:x
} // end: scales
} //end options
});
</script>
</body>
</html>
I believe it needs to be set under the plugins property in options, like
options: {
plugins: { /// PUT LEGEND UNDER THIS PROP
legend: {
position: 'bottom',
}
},
scales: {
y: {
beginAtZero: true,
display: false }// end: y
,x: {
grid: {
borderDash: [6, 5],
lineWidth: 1,
color:'#CCCCCC' }// end grid
}//end:x
} // end: scales
} //end options
I need to make a chart at the level with a row in the table, are there any tips on how to implement this enter image description here
I need the chart lines to match the row level in the table
and this code draws a separate chart
const diag = () => {
document.getElementById("canvasic").innerHTML = ' ';
document.getElementById("canvasic").innerHTML = '<canvas id="densityChart" className="canav"></canvas>';
densityCanvas = document.getElementById("densityChart");
//remove canvas from container
Chart.defaults.global.defaultFontFamily = "Arial";
Chart.defaults.global.defaultFontSize = 16;
var densityData = {
label: 'CallVol',
data:calloiList1,
backgroundColor: 'rgba(0,128,0, 0.6)',
borderColor: 'rgba(0,128,0, 1)',
borderWidth: 2,
hoverBorderWidth: 0
};
var densityData1 = {
label: 'PutVol',
data:calloiList3 ,
backgroundColor: 'rgba(255,0,0, 0.6)',
borderColor: 'rgba(255,0,0, 1)',
borderWidth: 2,
hoverBorderWidth: 0
};
var chartOptions = {
scales: {
yAxes: [{
barPercentage: 0.5
}]
},
elements: {
rectangle: {
borderSkipped: 'left',
}
}
};
var barChart = new Chart(densityCanvas, {
type: 'horizontalBar',
data: {
labels: calloiList4,
datasets: [densityData,densityData1],
},
options: chartOptions
}
);
}
enter image description here
I hope to have two canvas for two plots left to right. It seems that the second canvas will be created below the first canvas automatically, and with position specified, their will be a large space below the canvas.
As canvases are created within a loop in my project, there are too many white spaces on the web, which I wish to have them gone with javascript.
Below is what I have.
<script type="text/javascript">
var canv = document.createElement("canvas");
canv.setAttribute('width', 200);
canv.setAttribute('height', 200);
canv.setAttribute('id', 'canv'+{{res.2}});
document.body.appendChild(canv);
var C = document.getElementById(canv.getAttribute('id'));
if (C.getContext) {
if (C.getContext) {
new Chart(document.getElementById(canv.getAttribute('id')), {
type: 'line',
data: {
labels: ["a1","a2","a3"],
datasets: [
{
label: ["AAA"],
backgroundColor: "rgba(62, 149, 205, 0.5)",
borderColor : "rgba(62, 149, 205, 1)",
pointBackgroundColor: "rgba(62, 149, 205, 1)",
data: [{{res.3}},{{res.4}},{{res.5}}] //numeric value
},
]
},
options: {
responsive: false,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
}
var canv2 = document.createElement("canvas");
canv2.setAttribute('width', 200);
canv2.setAttribute('height', 200);
canv2.setAttribute('id', 'canv2_'+{{res.2}});
document.body.appendChild(canv2);
var C2 = document.getElementById(canv2.getAttribute('id'));
C2.style.left='200px';
C2.style.top='-200px';
C2.style.position="relative";
if (C2.getContext) {
if (C2.getContext) {
new Chart(document.getElementById(canv2.getAttribute('id')), {
type: 'line',
data: {
labels: ["b1","b2","b3"],
datasets: [
{
label: ["BBB"],
backgroundColor: "rgba(62, 149, 205, 0.5)",
borderColor : "rgba(62, 149, 205, 1)",
pointBackgroundColor: "rgba(62, 149, 205, 1)",
data: [{{res.12}},{{res.13}},{{res.14}}] //numeric value
},
]
},
options: {
responsive: false,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
}
</script>
Above leaves spaces of height 200 below every canv and canv2 created.
How can I have them disappear? Thanks in advance.
Something like the below? If you need more specific placement on page perhaps wrap them in a container that can be more easily moved around.
Edit: Updated to include centering CSS. Might be a bit tight on the snippet preview mind.
<html>
<head>
<style>
html, body{
width:100%;
height:100%;
margin:0px;
border:0px;
padding:0px;
box-sizing:border-box;
}
#canvas_container{
position: absolute;
left:50%; /* put 50% of containing div's width to my left */
transform: translate(-50%); /* now move me back half of my own width */
}
</style>
</head>
<body>
<div id="canvas_container">
</div>
<script type="text/javascript">
function createCanvas() {
let canv = document.createElement('canvas')
canv.height = 150;
canv.width = 150;
canv.style.backgroundColor = 'red';
canv.style.border = '1px solid black'
canv.style.position = 'relative';
canv.style.float = 'left';
document.getElementById('canvas_container').appendChild(canv);
}
createCanvas();
createCanvas();
</script>
</body>
</html>
I wanted to stream live data in the form of a chart. I'm new to Javascript, so I wanted to first experiment with the sample on this page.
https://web.archive.org/web/20211113012042/https://nagix.github.io/chartjs-plugin-streaming/latest/samples/charts/line-horizontal.html
The code is given as:
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 randomScalingFactor() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
}
function onRefresh(chart) {
chart.config.data.datasets.forEach(function(dataset) {
dataset.data.push({
x: Date.now(),
y: randomScalingFactor()
});
});
}
var color = Chart.helpers.color;
var config = {
type: 'line',
data: {
datasets: [{
label: 'Dataset 1 (linear interpolation)',
backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
borderColor: chartColors.red,
fill: false,
lineTension: 0,
borderDash: [8, 4],
data: []
}, {
label: 'Dataset 2 (cubic interpolation)',
backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
borderColor: chartColors.blue,
fill: false,
cubicInterpolationMode: 'monotone',
data: []
}]
},
options: {
title: {
display: true,
text: 'Line chart (hotizontal scroll) sample'
},
scales: {
xAxes: [{
type: 'realtime'
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
}
}]
},
tooltips: {
mode: 'nearest',
intersect: false
},
hover: {
mode: 'nearest',
intersect: false
},
plugins: {
streaming: {
duration: 20000,
refresh: 1000,
delay: 2000,
onRefresh: onRefresh
}
}
}
};
window.onload = function() {
var ctx = document.getElementById('myChart').getContext('2d');
window.myChart = new Chart(ctx, config);
};
document.getElementById('randomizeData').addEventListener('click', function() {
config.data.datasets.forEach(function(dataset) {
dataset.data.forEach(function(dataObj) {
dataObj.y = randomScalingFactor();
});
});
window.myChart.update();
});
var colorNames = Object.keys(chartColors);
document.getElementById('addDataset').addEventListener('click', function() {
var colorName = colorNames[config.data.datasets.length % colorNames.length];
var newColor = chartColors[colorName];
var newDataset = {
label: 'Dataset ' + (config.data.datasets.length + 1),
backgroundColor: color(newColor).alpha(0.5).rgbString(),
borderColor: newColor,
fill: false,
lineTension: 0,
data: []
};
config.data.datasets.push(newDataset);
window.myChart.update();
});
document.getElementById('removeDataset').addEventListener('click', function() {
config.data.datasets.pop();
window.myChart.update();
});
document.getElementById('addData').addEventListener('click', function() {
onRefresh(window.myChart);
window.myChart.update();
});
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.5.0/chartjs-plugin-streaming.min.js"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<p>
<button id="randomizeData">Randomize Data</button>
<button id="addDataset">Add Dataset</button>
<button id="removeDataset">Remove Dataset</button>
<button id="addData">Add Data</button>
</p>
</body>
When I copy and paste it into jsfiddle, the first code snippet going into the Javascript section and the second going into the HTML section. However, nothing happens? Could someone explain why/help me edit it so that it works?
Note: the code above is not my own, it belongs to this guy
In JSFiddle, the load type is set to 'On Load' by default, so you cannot handle the load event. Setting the load type to 'No wrap - bottom of ' works (in the pop-up menu in the Javascript section).
In my controller I have an Action method that will find all questions in a table called Questions, and the answers for each question.
This Action is of type ContentResult that will return a result serialized in Json format.
public ContentResult GetData()
{
var datalistQuestions = db.Questions.ToList();
List<PsychTestViewModel> questionlist = new List<PsychTestViewModel>();
List<PsychTestViewModel> questionanswerslist = new List<PsychTestViewModel>();
PsychTestViewModel ptvmodel = new PsychTestViewModel();
foreach (var question in datalistQuestions)
{
PsychTestViewModel ptvm = new PsychTestViewModel();
ptvm.QuestionID = question.QuestionID;
ptvm.Question = question.Question;
questionlist.Add(ptvm);
ViewBag.questionlist = questionlist;
var agree = //query
var somewhatAgree = //query
var disagree = //query
int Agree = agree.Count();
int SomewhatAgree = somewhatAgree.Count();
int Disagree = disagree.Count();
ptvmodel.countAgree = Agree;
ptvmodel.countSomewhatAgree = SomewhatAgree;
ptvmodel.countDisagree = Disagree;
questionanswerslist.Add(ptvmodel);
ViewBag.questionanswerslist = questionanswerslist;
}
return Content(JsonConvert.SerializeObject(ptvmodel), "application/json");
}
Now, my problem is the pie chart is not being created and I don't quite know how to push the values to my data structure?
What should I be doing instead?
Here is my script:
#section Scripts {
<script type="text/javascript">
var PieChartData = {
labels: [],
datasets: [
{
label: "Agree",
backgroundColor:"#f990a7",
borderWidth: 2,
data: []
},
{
label: "Somewhat Agree",
backgroundColor: "#aad2ed",
borderWidth: 2,
data: []
},
{
label: "Disgree",
backgroundColor: "#9966FF",
borderWidth: 2,
data: []
},
]
};
$.getJSON("/PsychTest/GetData/", function (data) {
for (var i = 0; i <= data.length - 1; i++) {
PieChartData.datasets[0].data.push(data[i].countAgree);
PieChartData.datasets[1].data.push(data[i].countSomewhatAgree);
PieChartData.datasets[2].data.push(data[i].countDisagree);
}
var ctx = document.getElementById("pie-chart").getContext("2d");
var myLineChart = new Chart(ctx,
{
type: 'pie',
data: PieChartData,
options:
{
responsive: true,
maintainaspectratio: true,
legend:
{
position : 'right'
}
}
});
});
</script>
You need two arrays for creating your chart. One of them indicates titles and another one shows the number of each titles. You have titles in the client side, so you only need the number of each options and it could be fetched from a simple server method like:
[HttpGet]
public JsonResult Chart()
{
var data = new int[] { 4, 2, 5 }; // fill it up whatever you want, but the number of items should be equal with your options
return JsonConvert.SerializeObject(data)
}
The client side code is here:
var aLabels = ["Agree","Somewhat Agree","Disagree"];
var aDatasets1 = [4,2,5]; //fetch these from the server
var dataT = {
labels: aLabels,
datasets: [{
label: "Test Data",
data: aDatasets1,
fill: false,
backgroundColor: ["rgba(54, 162, 235, 0.2)", "rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
borderColor: ["rgb(54, 162, 235)", "rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
borderWidth: 1
}]
};
var opt = {
responsive: true,
title: { display: true, text: 'TEST CHART' },
legend: { position: 'bottom' },
//scales: {
// xAxes: [{ gridLines: { display: false }, display: true, scaleLabel: { display: false, labelString: '' } }],
// yAxes: [{ gridLines: { display: false }, display: true, scaleLabel: { display: false, labelString: '' }, ticks: { stepSize: 50, beginAtZero: true } }]
//}
};
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx, {
type: 'pie',
data: dataT,
options: opt
});
<script src="https://github.com/chartjs/Chart.js/releases/download/v2.7.1/Chart.min.js"></script>
<div Style="font-family: Corbel; font-size: small ;text-align:center " class="row">
<div style="width:100%;height:100%">
<canvas id="myChart" style="padding: 0;margin: auto;display: block; "> </canvas>
</div>
</div>
If you are still looking to use json for chart.js charts.
Here is a solution which fetch a json file and render it on chart.js chart.
fetch('https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/CSVtoJSON.json')
.then(function(response) {
return response.json();
})
.then(function(ids) {
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: ids.map(function(id) {
return id.Label;
}),
datasets: [
{
label: "value2",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: ids.map(function(id) {
return id.Value2;
}),
},
{
label: "value",
//backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: ids.map(function(id) {
return id.Value;
}),
},
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Sample Json Data Chart'
}
}
});
});
see running code on jsfiddle here