You must be logged in to post your query.
Home › Forums › Chart Support › Click Events in Spline Chart.
I want to make click events on spline chart.
I can get the data value on only spline chart line data points, but I am going to get the data value on not only the spline chart data points but on every spline chart line. Here is my code.
{% load static %} <!DOCTYPE html> <html> <head> <title>Chart using XML Data</title> <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script> <script type="text/javascript"> window.onload = function () { // note : just for demo data is passed directly and not via ajax $.ajax({ type: "GET", headers: { 'Access-Control-Allow-Origin': '*' }, url: "{% static '/datas.csv' %}", dataType: "text", success: function (dataCsv) { processData(dataCsv); } }); var data = []; var categoris = []; function addDataPoint(lineData, index) { var rowData = lineData.split(','); var dataFlag = false; if (!dataFlag) { data.push({ type: "spline", visible: true, showInLegend: false, dataPoints: [], }); } for (var j = 0; j < rowData.length - 1; j++) { if (Number.isInteger(parseInt(rowData[1]))) { data[index].dataPoints.push({ x: parseInt(rowData[j]), y: j ,click: onClick}); dataFlag = true; } else { if (rowData[j] !== '' && j === 0) { categoris.push(rowData[1]); } } } } function processData(allText) { var allLinesArray = allText.split('\n'); if (allLinesArray.length > 0) { for (var i = 0; i < allLinesArray.length - 1; i++) { addDataPoint(allLinesArray[i], i); } chart.render(); } } function onClick(e){ alert( e.dataSeries.type+ ", dataPoint { x:" + e.dataPoint.x + ", y: "+ e.dataPoint.y + " }" ); } var chart = new CanvasJS.Chart("chartContainer", { title: { text: "csv formated data" }, interactivityEnabled:true, zoomEnabled: true, zoomType: "xy", axisY: { gridThickness: 0.5, tickLength: 1, lineThickness: 1, }, axisX: { gridThickness: 0.5, tickLength: 1, lineThickness: 1, interval: 1, labelFormatter: function (e) { var formattedLabel = categoris[e.value - 1]; return formattedLabel; }, }, data: data }); jQuery("#chartContainer .canvasjs-chart-canvas").last().on("click", function (e) { var parentOffset = $(this).parent().offset(); var relX = e.pageX - parentOffset.left; var relY = e.pageY - parentOffset.top var xValue = Math.round(chart.axisX[0].convertPixelToValue(relX)); var yValue = Math.round(chart.axisY[0].convertPixelToValue(relY)); alert("Value on Axis Scale: { " + chart.axisX[0].convertPixelToValue(relX) + ", " + chart.axisY[0].convertPixelToValue(relY) + "}"); }); document.getElementsByClassName("canvasjs-chart-canvas")[1].addEventListener("wheel", function (e) { e.preventDefault(); if (e.clientX < chart.plotArea.x1 || e.clientX > chart.plotArea.x2 || e.clientY < chart.plotArea.y1 || e.clientY > chart.plotArea.y2) return; var axisX = chart.axisX[0]; var viewportMin = axisX.get("viewportMinimum"), viewportMax = axisX.get("viewportMaximum"), interval = axisX.get("minimum"); var newViewportMin, newViewportMax; if (e.deltaY < 0) { newViewportMin = viewportMin + interval; newViewportMax = viewportMax - interval; } else if (e.deltaY > 0) { newViewportMin = viewportMin - interval; newViewportMax = viewportMax + interval; } if (newViewportMin >= chart.axisX[0].get("minimum") && newViewportMax <= chart.axisX[0].get("maximum") && (newViewportMax - newViewportMin) > (2 * interval)) { chart.axisX[0].set("viewportMinimum", newViewportMin, false); chart.axisX[0].set("viewportMaximum", newViewportMax); } }); } </script> </head> <body> <div id="chartContainer" style="height: 680px; width: 100%;"></div> </body> </html>
@xinglong,
Using click option you can add click event handler for the dataPoints. However, adding a click event handler to the line is not possible as of now.
___________ Indranil Deo Team CanvasJS
You must be logged in to reply to this topic. Login/Register