Home forums Using CanvasJS Click Events in Spline Chart.

This topic contains 1 reply, has 2 voices, and was last updated by  Indranil Deo 2 weeks, 5 days ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #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.