Home Forums Chart Support Click Events in Spline Chart.

Click Events in Spline Chart.

Viewing 2 posts - 1 through 2 (of 2 total)
  • #26961

    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://canvasjs.com/assets/script/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>
    #26978

    @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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.