Hello I have a question concerning js charts. I have already created one in django application and i want to generate a javascript alert by clicking a certain point in the chart.
How can the alert get the value of the point that i choose?
For example with the value 92 like what is shown in the figure below:
This can be done with an onClick even handler as follows:
onClick: (event, elements, chart) => {
if (elements[0]) {
const i = elements[0].index;
alert(chart.data.labels[i] + ': ' + chart.data.datasets[0].data[i]);
}
}
Please take a look at below runnable code and see how it works.
new Chart('myChart', {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: '# of Votes',
data: [65, 59, 80, 81, 56, 55, 40],
borderColor: '#a00'
}]
},
options: {
onClick: (event, elements, chart) => {
if (elements[0]) {
const i = elements[0].index;
alert(chart.data.labels[i] + ': ' + chart.data.datasets[0].data[i]);
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="myChart" width="400" height="95"></canvas>
I am trying to create a chart js popover but I am getting the error:
Failed to create chart: can't acquire context from the given item
I think that this is probably happening because the canvas tag is created dynamically, but I am not sure how to fix it. Any ideas? This is the js code I am using:
$(function() {
$('[data-toggle="popover"]').popover({
html: true,
content: '<canvas id="myChart" width="400" height="400"></canvas>',
}).on('shown.bs.popover', function() {
new Chart($('#myChart'), {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
}]
},
// Configuration options go here
options: {}
});
});
HTML:
<button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="Good vs. Evil Winrate" data-placement="bottom">Who's Winning?</button>
I am new to charts/angular, and it's been a long time since I used javascript. I'm trying to use a factory in Angular to grab data from a server and use it to populate a chart (which uses Angular Charts, a wrapper around Charts.js). I can populate it originally with fake data, but changing it at all causes the chart to go blank. Do I have some sort of scoping issue here? Here's the relevant code:
.controller("LineCtrl", ["$scope", "HRDataPointFactory", function ($scope, HRDataPointFactory) {
//The following lines cause the chart to populate, but obviously I dont care about this fake data.
//$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
//$scope.series = ["Series A", "Series B"];
//$scope.data = [
// [65, 59, 80, 81, 56, 55, 40],
// [28, 48, 40, 19, 86, 27, 90]
//];
$scope.onClick = function(points, evt) {
console.log(points, evt);
};
$scope.data = [[]];
$scope.labels = [];
$scope.series = ["Department"];
$scope.getData = function() {
HRDataPointFactory.getData($scope.department, $scope.dt1, $scope.dt2)
.then(function (data) {
var i;
for (i = 0; i < data.data.length; i++) {
$scope.data[0].push(data.data[i].EmployeeCount);
}
for (i = 0; i < data.data.length; i++) {
$scope.labels.push(data.data[i].Date);
}
});
}
/*unrelated stuff here*/
}
])
.factory("HRDataPointFactory", function HRDataPointFactory($http) {
var exports = {};
exports.getData = function(deptKey, start, end) {
var config = {
params: { departmentKey: deptKey, startTime: start, endTime: end }
}
return $http.get("/HR/Data", config)
.then(function(response) {
console.log(response);
return response;
},function(data) {
console.log("There was an error!", data);
return response;
});
};
return exports;
});
And the html:
<canvas id="line" class="chart chart-line" chart-data="data"
chart-labels="labels" chart-legend="true" chart-series="series"
chart-click="onClick">
</canvas>
Thank you for the help!
I created a Plunker with a working example. To simplify I only pull the data (not the labels, etc.), but that is easy to complete.
In the controller, we assign vm to this and in the function getData I reference vm.data. Before you had $scope which is a different $scope in the function that the one you assign as a blank array.
.controller('MyCtrl', ['$scope', 'HRDataPointFactory', function($scope, HRDataPointFactory) {
var vm = this;
//The following lines cause the chart to populate, but obviously I dont care about this fake data.
vm.labels = ["January", "February", "March", "April", "May", "June", "July"];
vm.series = ["Series A", "Series B"];
// vm.data = [
// [65, 59, 80, 81, 56, 55, 40],
// [28, 48, 40, 19, 86, 27, 90]
// ];
vm.onClick = function(points, evt) {
console.log(points, evt);
};
vm.data = [
[]
];
vm.getData = function() {
HRDataPointFactory.getData($scope.department, $scope.dt1, $scope.dt2)
.then(function(success) {
console.log(JSON.stringify(success));
vm.data = success.data;
});
}
vm.getData();
/*unrelated stuff here*/
}])
I print in the console the data I receive:
{"data":[[65,59,80,81,56,55,40],[28,48,40,19,86,27,90]],"status":200,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"params":{},"url":"data","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":""}
The data is hosted on plunker too using this as a format:
[
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
]
Please not that I also used the "Controller as" syntax in the HTML to respect best practices... see john papa's article on this subject.
<div ng-controller="MyCtrl as vm">
<canvas id="line" class="chart chart-line" chart-data="vm.data"
chart-labels="vm.labels" chart-legend="true" chart-series="vm.series"
chart-click="onClick">
</canvas>
</div>
Let us know.
I've been reading the docs, and there are ways to replace the data then update the chart:
myLineChart.data.datasets[0].data[2] = 50; // Would update the first dataset's value of 'March' to be 50
myLineChart.update(); // Calling update now animates the position of March from 90 to 50.
https://github.com/chartjs/Chart.js/blob/master/docs/07-Advanced.md
But addData() appears to be gone, am I stuck with making my own addData for local data and then updating the whole chart? or am I missing something.
The update() handles adding data too. Just push your new data / labels into the config object that you passed when creating the chart and then call update()
For instance,
var config = {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [65, 0, 80, 81, 56, 85, 40],
fill: false
}]
}
};
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, config);
setTimeout(function(){
config.data.labels.push('Test');
config.data.datasets[0].data.push(3);
myChart.update();
}, 1000);
Fiddle - http://jsfiddle.net/zpnx8ppb/
I have a Meteor Collection which I want to be presented into a graph using ChartJS. I was able to follow how ChartJS documentation.
My problem now is how to transform my collection and pass it on to ChartJS.
ChartJs Data format :
function drawChart() {
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
data: [28, 48, 40, 19, 86, 27, 90]
}]
};
This is how my collection was saved :
Categories.insert({
categoryname : $('#categoryname').val(),
value : $('#categoryvalue').val()
});
I wanted to use the categoryname as the chart labels and the value as the data. How am I going to do this?
This is how I made it work after another try after I posted my question.
function drawChart() {
var cur = Categories.find();
collData = [];
cur.forEach(function(cat){
collData.push([cat.value]);
});
collLabel = [];
cur.forEach(function(cat){
collLabel.push([cat.categoryname]);
});
var data = {
labels: collLabel,
datasets: [{
data: collData
}]
};
};
I am not sure if this the right way to do it but it works for now.