Display "Thresholds" as horizontal lines with label in Chart.js - javascript

I want to set maximum horizontal line in my chart like danger border line
In Above image, I have a line chart where I need to set horizontal line like blue color.
I have reviewed the ChartJS doc but not found any ref.
I have need to set same as below image

Consider this chart.js plugin
Courtesy of this link : http://www.java2s.com/example/javascript/chart.js/draw-horizontal-lines-in-chartjs.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>
<script type="text/javascript">
$(window).load(function(){//from www . j a va 2 s . c o m
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d");
var horizonalLinePlugin = {
afterDraw: function(chartInstance) {
var yScale = chartInstance.scales["y-axis-0"];
var canvas = chartInstance.chart;
var ctx = canvas.ctx;
var index;
var line;
var style;
if (chartInstance.options.horizontalLine) {
for (index = 0; index < chartInstance.options.horizontalLine.length; index++) {
line = chartInstance.options.horizontalLine[index];
if (!line.style) {
style = "rgba(169,169,169, .6)";
} else {
style = line.style;
}
if (line.y) {
yValue = yScale.getPixelForValue(line.y);
} else {
yValue = 0;
}
ctx.lineWidth = 3;
if (yValue) {
ctx.beginPath();
ctx.moveTo(0, yValue);
ctx.lineTo(canvas.width, yValue);
ctx.strokeStyle = style;
ctx.stroke();
}
if (line.text) {
ctx.fillStyle = style;
ctx.fillText(line.text, 0, yValue + ctx.lineWidth);
}
}
return;
};
}
};
Chart.pluginService.register(horizonalLinePlugin);
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
}]
};
var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
"horizontalLine": [{
"y": 82,
"style": "rgba(255, 0, 0, .4)",
"text": "max"
}, {
"y": 60,
"style": "#00ffff",
}, {
"y": 44,
"text": "min"
}]
}
});
});
</script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
</body>
</html>

Related

Remove data after adding it (chart.js)

I have an add data function in my bar-chart but I would like to be able to remove this data with onclick. How do I do this?
var canvas = document.getElementById("barChart");
var ctx = canvas.getContext('2d');
// We are only changing the chart type, so let's make that a global variable along with the chart object:
var chartType = 'bar';
var myBarChart;
// Global Options:
Chart.defaults.global.defaultFontColor = 'grey';
Chart.defaults.global.defaultFontSize = 16;
var data = {
labels: [ "2012", "2013", "2014", "2015", "2016", "2017"],
datasets: [{
label: "Miljoner ton",
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(0,255,0,0.4)",
borderColor: "green", // The main line color
borderCapStyle: 'square',
pointBorderColor: "white",
pointBackgroundColor: "green",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "green",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
data: [56.38, 59.3, 61.81, 58.83, 52.32, 66.86],
spanGaps: true,
}]
};
// Notice the scaleLabel at the same level as Ticks
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
title: {
fontSize: 18,
display: true,
text: 'Källa: Globallife.org',
position: 'bottom'
}
};
function addData() {
myBarChart.data.labels[7] ="Ekologisk palmolja";
myBarChart.data.datasets[0].data[7] = 14;
myBarChart.update();
}
// We add an init function down here after the chart options are declared.
init();
function init() {
// Chart declaration:
myBarChart = new Chart(ctx, {
type: chartType,
data: data,
options: options
});
}
Below is a working example that demonstrates modifying and updating the chart when clicking a button. Your addData function is a little odd in that it adds data at index 7, but the dataset only has keys 0-5, so this causes an extra blank data point to be inserted at index 6.
In case this isn't what you intended, I added some extra functions (pushData and popData) to show adding and removing from the end of a dataset as that's a quite common requirement (and therefore documented).
// same as original function; inserts or updates index 7.
function addData(e) {
myBarChart.data.labels[7] = "Ekologisk palmolja";
myBarChart.data.datasets[0].data[7] = 14;
myBarChart.update();
}
// requested function; removes index 7.
function removeData(e) {
myBarChart.data.labels.splice(7, 1);
myBarChart.data.datasets[0].data.splice(7, 1);
myBarChart.update();
}
// example of how to add data point to end of dataset.
function pushData(e) {
myBarChart.data.labels.push("Ekologisk palmolja");
myBarChart.data.datasets[0].data.push(14);
myBarChart.update();
}
// example of how to remove data point from end of dataset.
function popData(e) {
myBarChart.data.labels.pop();
myBarChart.data.datasets[0].data.pop();
myBarChart.update();
}
// set listeners on buttons
document.getElementById('add1').addEventListener('click', addData);
document.getElementById('remove1').addEventListener('click', removeData);
document.getElementById('add2').addEventListener('click', pushData);
document.getElementById('remove2').addEventListener('click', popData);
Chart.defaults.global.defaultFontColor = 'grey';
Chart.defaults.global.defaultFontSize = 16;
let myBarChart = new Chart(document.getElementById('chart'), {
type: 'bar',
data: {
labels: ["2012", "2013", "2014", "2015", "2016", "2017"],
datasets: [{
label: "Miljoner ton",
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(0,255,0,0.4)",
borderColor: "green", // The main line color
borderCapStyle: 'square',
pointBorderColor: "white",
pointBackgroundColor: "green",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "green",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
data: [56.38, 59.3, 61.81, 58.83, 52.32, 66.86],
spanGaps: true
}]
},
options: {
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
title: {
fontSize: 18,
display: true,
text: 'Källa: Globallife.org',
position: 'bottom'
}
}
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart"></canvas>
<button id="add1">Add index 7</button>
<button id="remove1">Remove index 7</button>
<button id="add2">Add to end</button>
<button id="remove2">Remove from end</button>

Chartjs real time graph x axis movement

I want to display a chart with Chartjs which displays real time data and slowly scrolls along the x axis, I have tried it here with js fiddle and it just jumps like crazy up and down: https://jsfiddle.net/rsnufpq7/
The graph should just move to the left side with the old points out of view without this animation like in the second example here: https://bost.ocks.org/mike/path/
var canvas = document.getElementById('myChart');
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.0,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
pointHitRadius: 10,
data: [65, 59, 80, 0, 56, 55, 40],
}
]
};
var zero = 7;
function adddata(){
var value = Math.floor((Math.random() * 10) + 1);;
myLineChart.data.labels.push(zero);
myLineChart.data.labels.splice(0, 1);
myLineChart.data.datasets[0].data.splice(0, 1);
myLineChart.data.datasets[0].data.push(value);
myLineChart.update();
zero++;
}
setInterval(function(){
adddata();
},1000);
var option = {
showLines: true
};
var myLineChart = Chart.Line(canvas,{
data:data,
options:option
});
Your code works as expected, only thing that you are missing is your y axis does not have range defined and it is being dynamically adjusted.
In order to achieve this I have extended your options to look like this.
var option = {
showLines: true,
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero:true,
min: 0,
max: 100
}
}]
}
};
I have defined min and max value for y axis and it is not jumping anymore.
Here is a working fiddle

Chart.js v2.6: Add arrows to pie chart output values

I am using Chart.js v2.6 to output a pie chart. The data is obtained from MySQL database. The chart renders properly, but I need to add arrows to data values as shown in the screenshot below.
Example pie chart with arrows:
Below is my code to output pie chart using Chart.js:
var chartdata_order_status = {
labels: status,
datasets: [{
label: 'Order status',
backgroundColor: ["#00b0f0","#92d050","#ffc000","#ff6dd9"],
data: count_status
}]
};
var pieGraph = new Chart(ctx3, {
type: 'pie',
data: chartdata_country_orders,
options: {
pieceLabel: {
mode: 'value',
position: 'outside',
fontColor: '#000',
format: function (value) {
return '$' + value;
}
},
title: {
display: true,
text: 'Total Sales by Country - Top 5',
fontSize: 15,
fontStyle: 'bold'
},
legend: {
display: true,
position: 'bottom',
},
}
});
I have not included the PHP code for obtaining data from the MySQLtable.
You can now use Chart.PieceLabel.js and get labels outside the slices.s,
DEMO
angular.module("app", ["chart.js"]).controller("ChartCtrl", function($scope) {
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.data = [65, 59, 80, 81, 56, 55, 40];
$scope.options = {
pieceLabel: {
render: 'label',
fontColor: '#000',
position: 'outside',
segment: true
}
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.js"></script>
<script src="https://rawgit.com/beaver71/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>
<div ng-app="app" ng-controller="ChartCtrl">
<canvas id="pie" class="chart chart-pie"
chart-data="data" chart-labels="labels" chart-options="options">
</canvas>
</div>
For chartjs 3.xx you can try this
var ctx = document.getElementById("myChart");
var data = [61, 10, 28];
const getSuitableY = (y, yArray = [], direction) => {
let result = y;
yArray.forEach((existedY) => {
if (existedY - 14 < result && existedY + 14 > result) {
if (direction === "right") {
result = existedY + 14;
} else {
result = existedY - 14;
}
}
});
return result;
};
const getOriginPoints = (source, center, l) => {
// console.log(source, center, l)
let a = {x: 0, y: 0};
var dx = (center.x - source.x) / l
var dy = (center.y - source.y) / l
a.x = center.x + l * dx
a.y = center.y + l * dy
return a
};
const options = {
plugins: {
legend: {
display: true,
position: "bottom"
},
},
layout: {
padding: {
top: 30,
left: 0,
right: 0,
bottom: 30
}
}
};
const plugins = [
{
afterDraw: (chart) => {
const ctx = chart.ctx;
ctx.save();
ctx.font = "10px 'Averta Std CY'";
const leftLabelCoordinates = [];
const rightLabelCoordinates = [];
const chartCenterPoint = {
x:
(chart.chartArea.right - chart.chartArea.left) / 2 +
chart.chartArea.left,
y:
(chart.chartArea.bottom - chart.chartArea.top) / 2 +
chart.chartArea.top
};
chart.config.data.labels.forEach((label, i) => {
const meta = chart.getDatasetMeta(0);
const arc = meta.data[i];
const dataset = chart.config.data.datasets[0];
// Prepare data to draw
// important point 1
const centerPoint = arc.getCenterPoint();
let color = chart.config._config.data.datasets[0].backgroundColor[i];
let labelColor = chart.config._config.data.datasets[0].backgroundColor[i];
const angle = Math.atan2(
centerPoint.y - chartCenterPoint.y,
centerPoint.x - chartCenterPoint.x
);
// important point 2, this point overlapsed with existed points
// so we will reduce y by 14 if it's on the right
// or add by 14 if it's on the left
let originPoint = getOriginPoints(chartCenterPoint, centerPoint, arc.outerRadius)
const point2X =
chartCenterPoint.x + Math.cos(angle) * (centerPoint.x < chartCenterPoint.x ? arc.outerRadius + 10 : arc.outerRadius + 10);
let point2Y =
chartCenterPoint.y + Math.sin(angle) * (centerPoint.y < chartCenterPoint.y ? arc.outerRadius + 15 : arc.outerRadius + 15);
let suitableY;
if (point2X < chartCenterPoint.x) {
// on the left
suitableY = getSuitableY(point2Y, leftLabelCoordinates, "left");
} else {
// on the right
suitableY = getSuitableY(point2Y, rightLabelCoordinates, "right");
}
point2Y = suitableY;
let value = dataset.data[i];
// if (dataset.polyline && dataset.polyline.formatter) {
// value = dataset.polyline.formatter(value);
// }
let edgePointX = point2X < chartCenterPoint.x ? chartCenterPoint.x - arc.outerRadius - 10 : chartCenterPoint.x + arc.outerRadius + 10;
if (point2X < chartCenterPoint.x) {
leftLabelCoordinates.push(point2Y);
} else {
rightLabelCoordinates.push(point2Y);
}
//DRAW CODE
// first line: connect between arc's center point and outside point
ctx.lineWidth = 2;
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(originPoint.x, originPoint.y);
ctx.lineTo(point2X, point2Y);
ctx.stroke();
// second line: connect between outside point and chart's edge
ctx.beginPath();
ctx.moveTo(point2X, point2Y);
ctx.lineTo(edgePointX, point2Y);
ctx.stroke();
//fill custom label
const labelAlignStyle =
edgePointX < chartCenterPoint.x ? "right" : "left";
const labelX = edgePointX < chartCenterPoint.x ? edgePointX : edgePointX + 0;
const labelY = point2Y + 7;
ctx.textAlign = labelAlignStyle;
ctx.textBaseline = "bottom";
ctx.font = "bold 12px Lato";
// ctx.fillStyle = labelColor;
ctx.fillText(value, labelX, labelY);
});
ctx.restore();
}
}
];
var myChart = new Chart(ctx, {
type: 'pie',
plugins: plugins,
options: options,
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Greek", "Greek"],
datasets: [
{
label: "# of Votes",
data: [30, 1, .4, 2, 0.3, 80],
backgroundColor: [
"rgba(255, 99, 132, 0.8)",
"rgba(54, 162, 235, 0.8)",
"rgba(255, 206, 86, 0.8)",
"rgba(75, 192, 192, 0.8)",
"rgba(153, 102, 255, 0.8)",
"rgba(75, 192, 192, 0.8)",
"rgba(255, 159, 64, 0.8)"
],
borderColor: [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)",
"rgba(75, 192, 192, 1)"
],
borderWidth: 1,
polyline: {
// color: "gray",
// labelColor: "gray",
formatter: (value) => `${value}`
}
}
]
}
});
.wrapper {
height: 200px;
width: 400px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<style>
.wrapper {
height: 200px;
width: 400px;
}
</style>
</head>
<body>
<div class="wrapper">
<canvas id="myChart"></canvas>
</div>
</body>
</html>
`

drawing line chart with chartjs

I'm trying to draw a line chart with chartjs, but i can't get it working - keep getting 't is undefined' error.
here is my fiddle example: http://jsfiddle.net/6bjy9nxh/344/
can anyone figure out what im doing wrong here?
chartjs: http://www.chartjs.org/docs/#line-chart-example-usage
cdn: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js
html
<canvas id="myChart" width="500" height="350"></canvas>
javascript
var ctx = document.getElementById("myChart");
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
}
]
};
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
});
You are including version 1, you need version 2 for Chart.js
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js
http://jsfiddle.net/x55sgzgf/

how to programmatically make a line chart point active/highlighted

I'm using chart.js 2.0 beta2 and have several line charts on a page and a slider. I'd like to highlight the data point on each line chart that matches the slider position (they all have the same number of points). I can't figure out how to easily make a point active in the code. Thanks for any tips.
SOLUTION FOR 2.0 BETA
Extend the chart controller of your choice, and fire off a simulated click event to show the tooltip. Here is some code that works for 2.0 (here is a fiddle):
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: false,
backgroundColor: "rgba(220,220,220,0.2)",
borderColor: "rgba(220,220,220,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(220,220,220,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(220,220,220,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
tension: 0.1,
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fill: true,
backgroundColor: "rgba(220,220,220,0.2)",
borderColor: "rgba(220,220,220,1)",
pointBorderColor: "rgba(220,220,220,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(220,220,220,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
var options = {
responsive: false
};
Chart.helpers.extend(Chart.controllers.line.prototype, {
fireSliderEvent: function(point, canvas, boundingRect){
var mouseX = Math.round((boundingRect.left + point._view.x) / (boundingRect.right - boundingRect.left) * canvas.width / this.chart.chart.currentDevicePixelRatio);
var mouseY = Math.round((boundingRect.top + point._view.y) / (boundingRect.bottom - boundingRect.top) * canvas.height / this.chart.chart.currentDevicePixelRatio);
var oEvent = document.createEvent('MouseEvents');
oEvent.initMouseEvent('click', true, true, document.defaultView,
0, mouseX, mouseY, mouseX, mouseY,
false, false, false, false, 0, canvas);
canvas.dispatchEvent(oEvent);
},
highlightPoints: function(point){
var canvas = this.chart.chart.canvas;
var boundingRect = canvas.getBoundingClientRect();
var points = this.getDataset().metaData;
this.fireSliderEvent(points[point], canvas, boundingRect);
}
});
var ctx = $("#canvas");
var myLine = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
var highlight = function(dataset, point){
myLine.data.datasets[dataset].controller.highlightPoints(point);
}
$("#slider").slider({
max: myLine.data.datasets[0].data.length-1,
slide: function( event, ui ) { highlight(0, ui.value); }
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta/Chart.js"></script>
<div id="slider" style="width: 500px;"></div>
<canvas id="canvas" height="300" width="500"></canvas>
SOLUTION FOR 1.x
You should extend the chart type and add your own method to select the point. Here is some code that will show the tooltip for each point depending on slider position:
var lineChartData = {
"datasets": [{
"data": [
"85",
"87",
"70",
"80",
"78",
"69",
"150",
"93",
"59",
"88"],
"pointStrokeColor": "#fff",
"fillColor": "rgba(220,220,220,0.5)",
"pointColor": "rgba(220,220,220,1)",
"strokeColor": "rgba(220,220,220,1)"
}],
"labels": [
"2013-01-01",
"2013-01-04",
"2013-01-15",
"2013-02-03",
"2013-03-25",
"2013-04-03",
"2013-04-14",
"2013-05-27",
"2013-05-27",
"2013-08-03"],
};
var options = {showTooltips: false};
Chart.types.Line.extend({
name: "LineAlt",
highlightPoints: function(datasetIndex, pointIndexArray){
var activePoints = [];
var points = this.datasets[datasetIndex].points;
for(i in pointIndexArray){
if(points[pointIndexArray[i]]){
activePoints.push(points[pointIndexArray[i]]);
}
}
this.showTooltip(activePoints);
}
});
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).LineAlt(lineChartData, options);
var highlight = function(index){
myLine.highlightPoints(0, [index]);
}
$("#slider").slider({
max: lineChartData.datasets[0].data.length-1,
slide: function( event, ui ) { highlight(ui.value); },
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="slider" style="width: 500px;"></div>
<canvas id="canvas" height="300" width="500"></canvas>
First BIG THANKS to JstnPwll for amazing answer that helped me a lot!
The ChartJS API has changed a lot and 2.0 BETA does not work
I needed this in ReactJS and the complexity of "extend" coordinator
was beyond my competence
This simpler works for Chart.JS 2.9
In original point is sometimes number sometimes object
So I made explicit using suffix num to clarify usage
Simply call fireSliderEvent(2,5);
fireSliderEvent = (datasetnum,pointnum)=>{
let myLine=this.chartRef.current.chartInstance;
//console.log(JSON.stringify(JSON.decycle(this.chartRef.current),null,2));
var canvas = myLine.canvas;
var boundingRect = canvas.getBoundingClientRect();
var meta = myLine.getDatasetMeta(datasetnum);
// https://stackoverflow.com/questions/6157929/how-to-simulate-a-mouse-click-using-javascript
var mouseX = Math.round((boundingRect.left + meta.dataset._children[pointnum]._view.x) / (boundingRect.right - boundingRect.left) * canvas.width / myLine.currentDevicePixelRatio);
var mouseY = Math.round((boundingRect.top + meta.dataset._children[pointnum]._view.y) / (boundingRect.bottom - boundingRect.top) * canvas.height / myLine.currentDevicePixelRatio);
var oEvent = document.createEvent('MouseEvents');
oEvent.initMouseEvent('click', true, true, document.defaultView,
0, mouseX, mouseY, mouseX, mouseY,
false, false, false, false, 0, canvas);
canvas.dispatchEvent(oEvent);
}

Categories

Resources