CODEWITHSUNDEEP
javascriptchart.js
Amir Shabani
Amir Shabani

Reputation: 4227

Determining which chart the user has clicked on

I'm using to draw multiple line charts. And when the user clicks on one of these charts, I need to know which chart it was. In order to catch the click of the user, I've added events: ['click'] in the options of the chart, as well as a onClick: clicked to call the function clicked when the user has clicked on the chart. Now I have this:

let chLine = document.getElementById("chLine");

let chartData = {
    labels: ['l1', 'l2', 'l3', 'l4', 'l5', 'l6', 'l7', 'l8', 'l9'],
    datasets: [
        {
            label: 'c1',
            data: [0.3, 0.4, 0.5, 0.35, 0.2, 0.5, 0.4, 0.55, 0.6],
            backgroundColor: 'transparent',
            borderColor: '#e6194b',
            borderWidth: 1,
            pointBackgroundColor: '#e6194b'
        },
        {
            label: 'c2',
            data: [0.7, 0.5, 0.2, 0.4, 0.6, 0.1, 0.88, 0.35, 0.45],
            backgroundColor: 'transparent',
            borderColor: '#3cb44b',
            borderWidth: 1,
            pointBackgroundColor: '#3cb44b' 
        }
    ]
}

if (chLine) {
    new Chart(chLine,{
            type: 'line',
            data: chartData,
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                        beginAtZero: false
                        }
                    }]
                },
                legend: {
                    position: 'top',
                    labels: {
                        boxWidth: 5
                    }
                },
                events: ['click'],
                onClick: clicked
            }
        }
    );
}

function clicked(c, i) {
    console.log(c, i)
}
<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <div class="container">
            <div class="row my-3">
                <div class="col">
                    <h4>Chart</h4>
                </div>
            </div>
            <div class="row my-2">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <canvas id="chLine" height="100"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
        <script src="test.js"></script>
    </body>
</html>

And every time I click on a chart, it gives an array containing information about each chart and also an object containing information about the click event. But I can't seem to find information to conclude which chart was clicked. How can I do this?

Upvotes: 1

Views: 42

Answers (1)

brk
brk

Reputation: 50346

Inside the clicked function you can use getElementAtEvent(c) & _datasetIndex; to get the index of the chart data.After that use that index to get the data which is used to draw that line chart. In this example another field is added to the data and on click that name field is consoled. In this case you need to click on the chart circle

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<div class="container">
  <div class="row my-3">
    <div class="col">
      <h4>Chart</h4>
    </div>
  </div>
  <div class="row my-2">
    <div class="col-md-12">
      <div class="card">
        <div class="card-body">
          <canvas id="chLine" height="100"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>


let chLine = document.getElementById("chLine");

let chartData = {
  labels: ['l1', 'l2', 'l3', 'l4', 'l5', 'l6', 'l7', 'l8', 'l9'],
  datasets: [{
      name: 'First Chart',
      label: 'c1',
      data: [0.3, 0.4, 0.5, 0.35, 0.2, 0.5, 0.4, 0.55, 0.6],
      backgroundColor: 'transparent',
      borderColor: '#e6194b',
      borderWidth: 1,
      pointBackgroundColor: '#e6194b'
    },
    {
      name: 'Second Chart',
      label: 'c2',
      data: [0.7, 0.5, 0.2, 0.4, 0.6, 0.1, 0.88, 0.35, 0.45],
      backgroundColor: 'transparent',
      borderColor: '#3cb44b',
      borderWidth: 1,
      pointBackgroundColor: '#3cb44b',
      id: '1',
    }
  ]
}

if (chLine) {
  var myLineChart = new Chart(chLine, {
    type: 'line',
    data: chartData,
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: false
          }
        }]
      },
      legend: {
        position: 'top',
        labels: {
          boxWidth: 5
        }
      },
      events: ['click'],
      onClick: clicked
    }
  });
}

function clicked(c, i, x) {
  let getDataSetIndex = this.getElementAtEvent(c)[0]._datasetIndex;
  console.log(chartData.datasets[getDataSetIndex].name)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<div class="container">
  <div class="row my-3">
    <div class="col">
      <h4>Chart</h4>
    </div>
  </div>
  <div class="row my-2">
    <div class="col-md-12">
      <div class="card">
        <div class="card-body">
          <canvas id="chLine" height="100"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions