CODEWITHSUNDEEP
chart.js
SqlDataMiner
SqlDataMiner

Reputation: 253

ChartJs 2.0 How do I obtain point information being clicked upon?

How do you configure ChartJS version 2.0 to upon clicking on a point on a radar chart provide the data associated with that point i.e. label, data value, dataset name. I read on https://github.com/nnnick/Chart.js/releases that version 2.0 provides:

New event hooks like onHover and onClick do the hard work for you. They pass you the good stuff without even having to locate via event

Could someone please show me what I need to do I have read the documentation and tried attaching to the various click and onClick events which the different objects support but can not work out how to achieve getting the associated data.

Sample code (simplified) which I am using is:

<pre>

    <script type="text/javascript">
      var config = {
      type: 'radar',
      data: {
      labels: ["Total IOPs","Total Num. Execs","Total Worker Time Seconds","Total  Physical Reads","Total Logical Writes","Total Logical Reads","Total Elapsed Time (s)","Longest Running Time (s)","Avg. IOPs per call","Avg. Elapsed Time (ms)","Avg. Num. Execs per Sproc","Avg IOPS per sproc"],
     datasets:
    [
     {
      label: "DB1",
      fillColor: "rgba(212, 212, 106, 0.2)",
      strokeColor: "rgba(212, 212, 106, 1)",
      pointColor: "rgba(212, 212, 106, 1)",
      pointStrokeColor: "#fff)",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(212, 212, 106, 1)",
      data:[100,100,33.1715210355987,100,100,100,11.8161563835901,4.29405702507729,100,5.4590570719603,39.672945113066,100]
     },
     {
      label: "DB2",
      fillColor: "rgba(165, 198, 99, 0.2)",
      strokeColor: "rgba(165, 198, 99, 1)",
      pointColor: "rgba(165, 198, 99, 1)",
      pointStrokeColor: "#fff)",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(165, 198, 99, 1)",
      data: [41.7446840202287,46.5744067420714,100,79.3727756793507,20.5131426518999,41.747519880759,100,100,89.6330850100954,100,100,16.5613115389214]
     }
     ]
     }
    };

     $(function () {
            var myRadar = new Chart(document.getElementById("myChart"), config);
         //how do I attach to the onclick event which gives me the point info being clicked on in chartjs 2.0?
        });

</script>

<div class="radarChart">
     <canvas id="myChart" width="700" height="700"></canvas>
</div>

Many thanks in advance.

Upvotes: 19

Views: 34377

Answers (5)

romor
romor

Reputation: 1240

I have a graph with multiple data sets. Using the proposed getElementsAtEvent(evt) function, returns all data sets at a given x position but not only the single dataset index that I clicked on. So, there is no possibility to identify the individual data set.

To get only the single point clicked on:

const activePoint = chartObj.getElementAtEvent(event);
const datasetIndex = activePoint[0]._datasetIndex;
const itemIndex = activePoint[0]._index;

Notice the missing "s" in getElementAtEvent() compared to getElementsAtEvent().

Upvotes: 9

potatopeelings
potatopeelings

Reputation: 41065

You should be able to use the getElementsAtEvent method, like so

document.getElementById("myChart").onclick = function(evt){
    var activePoints = myRadar.getElementsAtEvent(evt);
    // use _datasetIndex and _index from each element of the activePoints array
};

Fiddle - http://jsfiddle.net/uwaszvk7/

Upvotes: 20

Rowan Christmas
Rowan Christmas

Reputation: 199

In addition you can use var activePoints = chartObj.getElementsAtXAxis(evt); to get the nearest active element based just on the x-axis. (Super useful for when you have some really small values)

Upvotes: 7

am0wa
am0wa

Reputation: 8377

Calling getElementsAtEvent(event) on your Chart instance passing an argument of an event, or jQuery event, will return the point elements that are at that the same position of that event.

...
var canvas = document.getElementById("myChart");
var myRadar = new Chart(canvas, config);
canvas.onclick = function(evt) {

    // => activePoints is an array of points on the canvas that are at the same position as the click event.
    var activePoint = myRadar.getElementsAtEvent(evt)[0];

    if (activePoint !== undefined) {
        var dataset = myRadar.data.datasets[activePoint._datasetIndex];
        var title = myRadar.data.labels[activePoint._index];
        var oldValue = dataset.data[activePoint._index];
        var newValue = oldValue + 10;
        dataset.data[activePoint._index] = newValue;
    }

    // Calling update now animates element from oldValue to newValue.
    myRadar.update();

    console.log("Dataset: '"+ dataset.label + "' Element '" + title + "' Value updated from: " + oldValue + " to: " + newValue);
};

Upvotes: 4

SqlDataMiner
SqlDataMiner

Reputation: 253

Another way to achieve this in ChartJS 2.0 is to use the lastActive property of the radar chart.

var myRadar = new Chart(document.getElementById("myChart"), config);
Chart.defaults.global.responsive = true;
Chart.defaults.global.hover.mode = 'single';
document.getElementById("myChart").onclick = function (evt) {
var activePoint = myRadar.lastActive[0];
if (activePoint !== undefined) {
        var datasetIndex = activePoint._datasetIndex;
                var index = activePoint._index;
                var datasetName = config.data.datasets[datasetIndex].label;
                var title = config.data.labels[index];
                var dataValue = config.data.datasets[datasetIndex].data[index];
                alert("Dataset Name: [" + datasetName + "] title: [" + title + "] value: [" + dataValue + "]");
            }
        };

Upvotes: 6

Related Questions