We Keep Coding

Changing an object value using onChange event

I am trying to change a chart data using the id given in a select box, for that I used an onChange event:
<label for="patientId">Choose a patient:</label>
<select name="patient" id="patient" onchange="myFunction(this.value)">
{% for item in patientId %}
<option value="{{item}}">
{{item}}
</option>
{% endfor %}
</select>
<canvas id="weeklyChart"></canvas>
The chart data is a bug object that looks like that:
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: {{ hourArray|safe}},
datasets: [{
label: "Value",
lineTension: 0.3,
backgroundColor: "rgba(78, 115, 223, 0.05)",
borderColor: "rgba(78, 115, 223, 1)",
pointRadius: 3,
pointBackgroundColor: "rgba(78, 115, 223, 1)",
pointBorderColor: "rgba(78, 115, 223, 1)",
pointHoverRadius: 3,
pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
pointHoverBorderColor: "rgba(78, 115, 223, 1)",
pointHitRadius: 10,
pointBorderWidth: 2,
data: {{ glucoseArray|safe}},
}],
},
}
In the onChange function I have the following logic:
function myFunction(val) {
let hourArray = [];
let glucoseArray = [];
for (let i = 0; i < deviceList.length; i++) {
if (deviceList[i].patientId == val) {
hourArray.push(deviceList[i].hour);
glucoseArray.push(deviceList[i].glucoseValue);
}
}
myLineChart.data.datasets[0].data = glucoseArray;
myLineChart.data.labels = hourArray;
console.log(myLineChart.data.datasets[0].data);
console.log(myLineChart.data.labels);
}
In the console.log() I have exactly the data I need, but nothing happens on the page. What can I do, so my function will render the right data for the chart.

You have to update the data you add.
For that use myLineChart.update()
For change data without animation you can use none as mode

Search box to show information in line chart

I'm trying to add a search box in to my web page that allows the user to select the data to show in a line chart.
I know how to pass the variable from the search box to PHP but the question is how can I render the chart in Javascript to update the information with the value of the search box after I have updated it in the PHP?
$(document).ready(function() {
$.ajax({
url: "http://localhost/chartjs/followersdata.php",
type: "GET",
success: function(data) {
console.log(data);
var userid = [];
var facebook_follower = [];
var twitter_follower = [];
var googleplus_follower = [];
for (var i in data) {
userid.push("UserID " + data[i].userid);
facebook_follower.push(data[i].facebook);
twitter_follower.push(data[i].twitter);
googleplus_follower.push(data[i].googleplus);
}
var chartdata = {
labels: userid,
datasets: [{
label: "facebook",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(59, 89, 152, 0.75)",
borderColor: "rgba(59, 89, 152, 1)",
pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
pointHoverBorderColor: "rgba(59, 89, 152, 1)",
data: facebook_follower
},
{
label: "twitter",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(29, 202, 255, 0.75)",
borderColor: "rgba(29, 202, 255, 1)",
pointHoverBackgroundColor: "rgba(29, 202, 255, 1)",
pointHoverBorderColor: "rgba(29, 202, 255, 1)",
data: twitter_follower
},
{
label: "googleplus",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(211, 72, 54, 0.75)",
borderColor: "rgba(211, 72, 54, 1)",
pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
pointHoverBorderColor: "rgba(211, 72, 54, 1)",
data: googleplus_follower
}
]
};
var ctx = $("#mycanvas");
var LineGraph = new Chart(ctx, {
type: 'line',
data: chartdata
});
},
error: function(data) {}
});
});
Thanks for your replies.

This link can help you
https://www.chartjs.org/docs/latest/developers/api.html
// duration is the time for the animation of the redraw in milliseconds
// lazy is a boolean. if true, the animation can be interrupted by other animations
LineGraph.render({
duration: 800,
lazy: false,
easing: 'easeOutBounce'
});

I have managed to do this, but I only return the json not the chart rendered.
<form action="./followersdata.php" method="post">
Licencia:<br>
<input type="text" name="licencia" id="licencia"><br>
<input type="submit" value="Submit" onsubmit="return showgraph();">
</form>

Draw line chart using chart.js with ajax

I'm tring to get Line Chart using Chart.js with ajax json data.
Basically It is ok using custom data eg. [176,617,930,606,649,0,0,0].
But I can't able to get the chart with ajax json data if I try like the below.
My JSON Data is
{'pvideo':[ {'DDATE':"2017-01","TOCDDB_VALUE":"DENY","CNT":"0"}, {'DDATE':"2017-01","TOCDDB_VALUE":"CRREQUEST","CNT":"176"}, {'DDATE':"2017-01","TOCDDB_VALUE":"NOCR","CNT":"0"}, {'DDATE':"2017-02","TOCDDB_VALUE":"DENY","CNT":"0"}, {'DDATE':"2017-02","TOCDDB_VALUE":"CRREQUEST","CNT":"617"}, {'DDATE':"2017-02","TOCDDB_VALUE":"NOCR","CNT":"0"}, {'DDATE':"2017-03","TOCDDB_VALUE":"DENY","CNT":"0"}, {'DDATE':"2017-03","TOCDDB_VALUE":"CRREQUEST","CNT":"930"}, {'DDATE':"2017-03","TOCDDB_VALUE":"NOCR","CNT":"0"}, {'DDATE':"2017-01","TOCDDB_VALUE":"SREG","CNT":"247"}, {'DDATE':"2017-02","TOCDDB_VALUE":"SREG","CNT":"94"}, {'DDATE':"2017-03","TOCDDB_VALUE":"SREG","CNT":"76"} ], ptrights:[ {'DDATE':"2017-01","TOCDDB_VALUE":"DENY","CNT":"0"}, {'DDATE':"2017-01","TOCDDB_VALUE":"CRREQUEST","CNT":"27"}, {'DDATE':"2017-01","TOCDDB_VALUE":"NOCR","CNT":"10"}, {'DDATE':"2017-02","TOCDDB_VALUE":"DENY","CNT":"3"}, {'DDATE':"2017-02","TOCDDB_VALUE":"CRREQUEST","CNT":"10"}, {'DDATE':"2017-02","TOCDDB_VALUE":"NOCR","CNT":"23"}, {'DDATE':"2017-03","TOCDDB_VALUE":"DENY","CNT":"0"}, {'DDATE':"2017-03","TOCDDB_VALUE":"CRREQUEST","CNT":"32"}, {'DDATE':"2017-03","TOCDDB_VALUE":"NOCR","CNT":"11"}]}
And code is
var crcnt = [];
var crcnt2 = [176,617,930,606,649,0,0,0];
var nocrcnt = [];
var denycnt = [];
$.getJSON(url, function(data) {
// I use lodash.js for _.filter and ._map
var crlist = _.filter(data.pvideo, function(o) { return o.TOCDDB_VALUE == 'CRREQUEST' });
var nocrlist = _.filter(data.pvideo, function(o) { return o.TOCDDB_VALUE == 'NOCR' });
var denylist = _.filter(data.pvideo, function(o) { return o.TOCDDB_VALUE == 'DENY' });
var crcnt = _.map(crlist, "CNT");
var nocrcnt = _.map(nocrlist, "CNT");
var denycnt = _.map(denylist, "CNT");});
var canvas1 = new chart(doucment.getElementByID("canvas1"), {
type: 'line',
data: {
labels: ["Jan", "Feb", "Mar","Apr", "May", "Jun", "Jul", "Aug"],
datasets: [{
label: "CRREQUEST",
backgroundColor: "rgba(255, 99, 00, 0.31)",
borderColor: "rgba(255, 99, 204, 0.7)",
pointBorderColor: "rgba(255, 99, 99, 0.7)",
pointBackgroundColor: "rgba(255, 33, 99, 0.7)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(220,220,220,1)",
data: crcnt
}, {
label: "NOCR",
backgroundColor: "rgba(204, 255, 255, 0.70)",
borderColor: "rgba(99, 255, 255, 0.70)",
pointBorderColor: "rgba(3, 88, 106, 0.70)",
pointBackgroundColor: "rgba(0, 33, 255, 0.70)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(151,187,205,1)",
pointBorderWidth: 1,
data: nocrcnt
}, {
label: "DENY",
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(0,0,30,1)",
pointBorderColor: "rgba(3, 88, 106, 0.70)",
pointBackgroundColor: "rgba(3, 88, 106, 0.70)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(151,187,205,1)",
pointBorderWidth: 1,
data: denycnt
}]});
I checked that custom data and json data is same by chrome console.
Console Capture

Chart JS add max value to legend

I'm new in Chart JS and I'm trying to add the maximum values for each dataset inside the legend. I've tried using legendCallback :
HTML:
<canvas id="lineChart"></canvas>
Javascript:
var ctx = document.getElementById("lineChart");
var lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['1','2','3','4','5','6','7','8','9','10'],
datasets: [{
label: "Max",
backgroundColor: "rgba(235, 70, 70, 0.31)",
borderColor: "rgba(231, 25, 25, 0.7)",
pointBorderColor: "rgba(231, 25, 25, 0.7)",
pointBackgroundColor: "rgba(231, 25, 25, 0.7)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointBorderWidth: 1,
data: [31, 74, 6, 39, 20, 85, 7, 80, 35, 70]
}, {
label: "Avg",
backgroundColor: "rgba(255, 255, 111, 0.3)",
borderColor: "rgba(255, 255, 50, 0.70)",
pointBorderColor: "rgba(255, 255, 50, 0.70)",
pointBackgroundColor: "rgba(255, 255, 50, 0.70)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(151,187,205,1)",
pointBorderWidth: 1,
data: [82, 23, 66, 9, 99, 4, 2, 25, 67, 20]
},
{
label: "Min",
backgroundColor: "rgba(90, 189, 90, 0.3)",
borderColor: "rgba(50, 173, 50, 0.70)",
pointBorderColor: "rgba(50, 173, 50, 0.70)",
pointBackgroundColor: "rgba(50, 173, 50, 0.70)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(151,187,205,1)",
pointBorderWidth: 1,
data: [30, 46, 60, 29, 79, 54, 23, 25, 47, 10]
}]
},
options: {
legend: {
display: true,
position: 'bottom'
},
legendCallback: function(chart) {
return 'a';
},
scales: {
xAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}]
}
}
});
but the displayed legend didn't changed. I've searched for some answers and I also tried using: lineChart.generateLegend(); but still no result.
It is possible to add the maximum value for each dataset inside legend?
Thanks in advance!

Yes, it is possible to show the max value for each dataset inside the legend. You can use the legend.labels.generateLabels config property to do this.
This property allows you to define your own function that generates the legend labels. To add the max, we simply iterate through each dataset's data array, find the max, and build it into the label string.
Here is an example configuration. The magic happens when we set the text property in the return.
legend: {
display: true,
position: 'bottom',
labels: {
generateLabels: function(chart) {
var data = chart.data;
return Chart.helpers.isArray(data.datasets) ? data.datasets.map(function(dataset, i) {
return {
text: dataset.label + " (Max Value: " + Chart.helpers.max(dataset.data).toLocaleString() + ")",
fillStyle: (!Chart.helpers.isArray(dataset.backgroundColor) ? dataset.backgroundColor : dataset.backgroundColor[0]),
hidden: !chart.isDatasetVisible(i),
lineCap: dataset.borderCapStyle,
lineDash: dataset.borderDash,
lineDashOffset: dataset.borderDashOffset,
lineJoin: dataset.borderJoinStyle,
lineWidth: dataset.borderWidth,
strokeStyle: dataset.borderColor,
pointStyle: dataset.pointStyle,
// Below is extra data used for toggling the datasets
datasetIndex: i
};
}, this) : [];
},
},
},
I also created a codepen to demonstrate this.

How to load data from Variable in eCharts

My problem is in displaying data, I cant display it at all.
When I write it like this it works "data: [5, 0, 2, 1, 2, 1, 0, 0, 5]"
But when I use function to load and push data it display nothing. Data in console looks same to me "[5, 0, 2, 1, 2, 1, 0, 0, 5]".
var f = document.getElementById("lineChart");
new Chart(f, {
type: "line",
data: {
labels: ["3:00","6:00", "9:00", "12:00", "15:00", "18:00", "21:00", "24:00"],
datasets: [{
label: "Stress value:",
backgroundColor: "rgba(38, 185, 154, 0.31)",
borderColor: "rgba(38, 185, 154, 0.7)",
pointBorderColor: "rgba(38, 185, 154, 0.7)",
pointBackgroundColor: "rgba(38, 185, 154, 0.7)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointBorderWidth: 1,
data: (function (){
var res = [];
var len = 10;
$.ajax({
dataType:"JSON",
type: 'GET',
url: "https://stressmonitor.smasty.net/api/1.0/day_stress/2017-02-26/?app_id=12345&token=12345"
}).then(function(dataa) {
var i= 0;
while (len--) {
console.log(res);
res.push(dataa.intervals[i].value);
i++;
}
});
return res;
})()
}]
}
})
}