31578

Chart.js Multiple dataset

I have a problem with Chart.js.

I want an an alert show me the ID value set in the dataset when I click on a point in the chart.

I have tried using getElementsAtEvent(evt);, but it doesn't work as I expected.

Can somebody help me? Thanks!

<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"> </script> </head> <body> <canvas id="myChart" width="400" height="100"></canvas> <script> var ctx = document.getElementById("myChart"); var color = ["#ff6384", "#5959e6", "#2babab", "#8c4d15", "#8bc34a", "#607d8b", "#009688"]; var scatterChart = new Chart(ctx, { type: 'line', data: { datasets: [{ label: 'Linea A', backgroundColor: "transparent", borderColor: color[1], pointBackgroundColor: color[1], pointBorderColor: color[1], pointHoverBackgroundColor: color[1], pointHoverBorderColor: color[1], data: [{ x: "2014-09-02", y: 90, id: '1A' }, { x: "2014-11-02", y: 96, id: '2A' }, { x: "2014-12-03", y: 97, id: '3A' }] }, { label: 'Linea B', backgroundColor: "transparent", borderColor: color[2], pointBackgroundColor: color[2], pointBorderColor: color[2], pointHoverBackgroundColor: color[2], pointHoverBorderColor: color[2], data: [{ x: "2014-09-01", y: 96, id: "1B" }, { x: "2014-10-04", y: 95.8, id: "2B" }, { x: "2014-11-06", y: 99, id: "3B" }] } ] }, options: { title: { display: true, text: 'Polveri', fontSize: 18 }, legend: { display: true, position: "bottom" }, scales: { xAxes: [{ type: 'time', time: { displayFormats: { 'millisecond': 'MM/YY', 'second': 'MM/YY', 'minute': 'MM/YY', 'hour': 'MM/YY', 'day': 'MM/YY', 'week': 'MM/YY', 'month': 'MM/YY', 'quarter': 'MM/YY', 'year': 'MM/YY', }, tooltipFormat: "DD/MM/YY" } }] } } }); document.getElementById("myChart").onclick = function(evt) { var activePoints = scatterChart.getElementsAtEvent(evt); var firstPoint = activePoints[1]; console.log(firstPoint._datasetIndex); console.log(firstPoint._index); var label = scatterChart.data.labels[firstPoint._index]; console.log(scatterChart.data.datasets[0].data[0].id); var value = scatterChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index]; if (firstPoint !== undefined) alert(label + ": " + value); }; </script> </body>

Answer1:

You have to change your label variable assignment from,

var label = scatterChart.data.labels[firstPoint._index];

To,

var label = scatterChart.data.datasets[firstPoint._index].label;

And you may also need to change your alert statment as,

alert(label + ": " + value.x);

<strong>Here is the working DEMO:</strong> https://jsfiddle.net/dt6c9jev/

Hope this helps!.

Answer2:

You need to use the .getElementAtEvent() prototype method instead of .getElementsAtEvent(). The difference being the first only returns the single point that you clicked whereas the other returns all points at the X axis for that click.

Here is an example.

document.getElementById("canvas").onclick = function(evt) { var activePoint = myLine.getElementAtEvent(event); // make sure click was on an actual point if (activePoint.length > 0) { var clickedDatasetIndex = activePoint[0]._datasetIndex; var clickedElementindex = activePoint[0]._index; var label = myLine.data.labels[clickedElementindex]; var value = myLine.data.datasets[clickedDatasetIndex].data[clickedElementindex]; alert("Clicked: " + label + " - " + value); } };

You can see a demonstration at this codepen.

Recommend

  • Scala call-by-name constructor parameter in implicit class
  • Symfony2 / Doctrine2 : How to override DebugStack class used in doctrine DataCollector?
  • Encoded unicode characters lost
  • Chart js - Draw center of each bubbles of a bubble chart
  • $_POST for text in DIV elements
  • Making Google Visualization - Annotation Chart to work in GWT
  • How to draw a line dynamically in android [duplicate]
  • Update Google Maps traffic layer without page reloading
  • close() was never explicitly called on database
  • Button click event not firing in jQuery
  • How do I get HTML corresponding to current DOM tree?
  • How to render a blob on a canvas element?
  • Custom validator control occupying space even though display set to dynamic
  • JQuery Internet Explorer and ajaxstop
  • Word Open XML Mail Merge
  • JSON response opens as a file, but I can't access it with JavaScript
  • Android fill_parent issue
  • FileReader+canvas image loading problem
  • Pass value from viewmodel to script in zk
  • Using $this when not in object context
  • Sails.js/waterline: Executing waterline queries in toJSON function of a model?
  • Deselecting radio buttons while keeping the View Model in synch
  • Getting last autonumber in access
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Counter field in MS Access, how to generate?
  • How reduce the height of an mschart by breaking up the y-axis
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Incrementing object id automatically JS constructor (static method and variable)
  • How to check if every primary key value is being referenced as foreign key in another table
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Can I have the cursor start on a particular column by default in jqgrid's edit mode?
  • Change an a tag attribute in JavaScript based on screen width
  • jquery mobile loadPage not working
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • How to stop GridView from loading again when I press back button?
  • Android Google Maps API OnLocationChanged only called once
  • EntityFramework adding new object to nested object collection
  • Android Heatmap on canvas or ImageView