Related
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>
I'm trying to get the ChartJS line chart working for a project I am working on. I followed a tutorial as I need to get the data from mySQL database and use this data to be displayed on the line chart.
I was wondering if anyone had experience using ChartJS and could tell me what's wrong with my code, please.
I have removed the weblink to the JSON data just for privacy reasons, but the data is shown in JSON format.
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - LineGraph</title>
<style>
.chart-container {
width: 640px;
height: auto;
}
</style>
<!-- javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/linegraph.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>
<body>
<div class="chart-container">
<canvas id="mycanvas" width="600" height="600"></canvas>
<script>
$(document).ready(function(){
$.ajax({
url : "**********",
type : "GET",
success : function(data){
console.log(data);
var user_id = [];
var pain = [];
var sleep = [];
var mood = [];
var heartrate = [];
var time_of_entry = [];
for(var i in data) {
user_id.push("UserID " + data[i].user_id);
pain.push(data[i].pain);
sleep.push(data[i].sleep);
mood.push(data[i].mood);
heartrate.push(data[i].heartrate);
time_of_entry.push(data[i].timeofentry);
}
var chartdata = {
labels: user_id,
datasets: [
{
label: "pain",
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: pain
},
{
label: "sleep",
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: sleep
},
{
label: "mood",
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: mood
},
{
label: "heartrate",
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: heartrate
},
{
label: "time_of_entry",
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: time_of_entry
}
]
};
var ctx = $("#mycanvas");
var mycanvas = new Chart(ctx, {
type: 'line',
data: chartdata
});
},
error : function(data) {
}
});
});
</script>
</div>
</body>
Step 1 - json data is wrong use The JSON Validator to check.
Here is the correct json data.
[{"0":"1","user_id":"1","1":"3","pain":"3","2":"3","sleep":"3","3":"3","mood":"3","4":"32","heartrate":"32","5":"2019-06-20 09:52:43","time_of_entry":"2019-06-20 09:52:43"},{"0":"1","user_id":"1","1":"3","pain":"3","2":"3","sleep":"3","3":"3","mood":"3","4":"32","heartrate":"32","5":"2019-06-20 09:52:53","time_of_entry":"2019-06-20 09:52:53"},{"0":"1","user_id":"1","1":"2","pain":"2","2":"23","sleep":"23","3":"3","mood":"3","4":"89","heartrate":"89","5":"2019-06-20 09:53:20","time_of_entry":"2019-06-20 09:53:20"}]
Step 2- parse the json data then use. It will work.
Attached the screenshot.
https://www.screencast.com/t/6t4r6hqMTw
$(document).ready(function(){
$.ajax({
url : "**********",
type : "GET",
success : function(data){
data = jQuery.parseJSON( data);
-------
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
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.
I have the following json:
[
{"periodo":"0","mes":"7","anio":"2015","montoIngreso":0,"monedaIngreso":"0","identifierIngreso":null,"montoGasto":0,"monedaGasto":"0","identifierGasto":null,"balance":0",
{"periodo":"1","mes":"8","anio":"2015","montoIngreso":0,"monedaIngreso":"0","identifierIngreso":null,"montoGasto":0,"monedaGasto":"0","identifierGasto":null,"balance":0},
{"periodo":"2","mes":"9","anio":"2015","montoIngreso":0,"monedaIngreso":"0","identifierIngreso":null,"montoGasto":0,"monedaGasto":"0","identifierGasto":null,"balance":0},
{"periodo":"3","mes":"10","anio":"2015","montoIngreso":0,"monedaIngreso":"0","identifierIngreso":null,"montoGasto":0,"monedaGasto":"0","identifierGasto":null,"balance":0},
{"periodo":"4","mes":"11","anio":"2015","montoIngreso":0,"monedaIngreso":"0","identifierIngreso":null,"montoGasto":0,"monedaGasto":"0","identifierGasto":null,"balance":0},
{"periodo":"5","mes":"12","anio":"2015","montoIngreso":0,"monedaIngreso":"0","identifierIngreso":null,"montoGasto":0,"monedaGasto":"0","identifierGasto":null,"balance":0},
{"periodo":"6","mes":"1","anio":"2016","montoIngreso":0,"monedaIngreso":"0","identifierIngreso":null,"montoGasto":0,"monedaGasto":"0","identifierGasto":null,"balance":0},
{"periodo":"7","mes":"2","anio":"2016","montoIngreso":0,"monedaIngreso":"0","identifierIngreso":null,"montoGasto":0,"monedaGasto":"0","identifierGasto":null,"balance":0},
{"periodo":"8","mes":"3","anio":"2016","montoIngreso":0,"monedaIngreso":"0","identifierIngreso":null,"montoGasto":0,"monedaGasto":"0","identifierGasto":null,"balance":0},
{"periodo":"9","mes":"4","anio":"2016","montoIngreso":0,"monedaIngreso":"0","identifierIngreso":null,"montoGasto":0,"monedaGasto":"0","identifierGasto":null,"balance":0},
{"periodo":"10","mes":"5","anio":"2016","montoIngreso":0,"monedaIngreso":"0","identifierIngreso":null,"montoGasto":0,"monedaGasto":"0","identifierGasto":null,"balance":0},
{"periodo":"11","mes":"6","anio":"2016","montoIngreso":3833.874,"monedaIngreso":"1","identifierIngreso":"ARS","montoGasto":175.56,"monedaGasto":"1","identifierGasto":"ARS","balance":3658.314},
{"periodo":"11","mes":"6","anio":"2016","montoIngreso":3833.874,"monedaIngreso":"1","identifierIngreso":"ARS","montoGasto":"460810","monedaGasto":"2","identifierGasto":"USD","balance":-456976.126},
{"periodo":"11","mes":"6","anio":"2016","montoIngreso":3833.874,"monedaIngreso":"1","identifierIngreso":"ARS","montoGasto":190.4448,"monedaGasto":"3","identifierGasto":"UYU","balance":3643.4292},
{"periodo":"11","mes":"6","anio":"2016","montoIngreso":"5000","monedaIngreso":"2","identifierIngreso":"USD","montoGasto":175.56,"monedaGasto":"1","identifierGasto":"ARS","balance":4824.44},
{"periodo":"11","mes":"6","anio":"2016","montoIngreso":"5000","monedaIngreso":"2","identifierIngreso":"USD","montoGasto":"460810","monedaGasto":"2","identifierGasto":"USD","balance":-455810},
{"periodo":"11","mes":"6","anio":"2016","montoIngreso":"5000","monedaIngreso":"2","identifierIngreso":"USD","montoGasto":190.4448,"monedaGasto":"3","identifierGasto":"UYU","balance":4809.5552},
{"periodo":"12","mes":"7","anio":"2016","montoIngreso":219.318,"monedaIngreso":"1","identifierIngreso":"ARS","montoGasto":15.444,"monedaGasto":"1","identifierGasto":"ARS","balance":203.874},
{"periodo":"12","mes":"7","anio":"2016","montoIngreso":219.318,"monedaIngreso":"1","identifierIngreso":"ARS","montoGasto":"105002","monedaGasto":"2","identifierGasto":"USD","balance":-104782.682},
{"periodo":"12","mes":"7","anio":"2016","montoIngreso":"324342","monedaIngreso":"2","identifierIngreso":"USD","montoGasto":15.444,"monedaGasto":"1","identifierGasto":"ARS","balance":324326.556},
{"periodo":"12","mes":"7","anio":"2016","montoIngreso":"324342","monedaIngreso":"2","identifierIngreso":"USD","montoGasto":"105002","monedaGasto":"2","identifierGasto":"USD","balance":219340}]
And i have a var with the labels:
["2015-7", "2015-8", "2015-9", "2015-10", "2015-11", "2015-12", "2016-1", "2016-2", "2016-3", "2016-4", "2016-5", "2016-6", "2016-7"]
From the first json, there supposed to be three datasets "montoIngreso" "montoGasto" and "balance"
The problem is that for some of the labels, i have two values on the json, for instance
anio:2016 mes:7 have 4 records so i need to add each of them to form 3 unique datasets
how can i do this?
Thanks!
Ok its not fancy but:
var valoresIngresos = new Array(labels.length).fill(0);
var valoresGastos = new Array(labels.length).fill(0);
var valoresBalance = new Array(labels.length).fill(0);
for(var i=0;i<labels.length;i++) {
var fuentes = dataSource.filter(source=>(source.anio+"-"+source.mes) == labels[i]);
for(var j=0;j<fuentes.length;j++) {
valoresIngresos[i] = valoresIngresos[i]+parseFloat(fuentes[j].montoIngreso);
valoresGastos[i] = valoresGastos[i]+parseFloat(fuentes[j].montoGasto);
valoresBalance[i] = valoresBalance[i]+parseFloat(fuentes[j].balance);
}
}
var ingresosDataset = {
label: "Ingresos",
data:valoresIngresos,
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,
};
datasets.push(ingresosDataset);