Home › Forums › Chart Support › Click Events in Spline Chart.

Click Events in Spline Chart.

Viewing 2 posts - 1 through 2 (of 2 total)
  • October 2, 2019 at 3:53 am #26961

    xinglong

    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>
    October 3, 2019 at 7:10 pm #26978

    Indranil

    @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.