CODEWITHSUNDEEP
javascriptonclickchart.js
user3211522
user3211522

Reputation: 53

chart.js increase value on click

I created a radar chart with chart js. I am able to add labels, but now I'm wondering how instead of inputting a value I can have them all set at 0 and increase/update +1 when the label is clicked

http://jsfiddle.net/pevy7vsz/15/

var ctx = $("#myChart").get(0).getContext("2d");

var myNewChart = new Chart(ctx);

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [ {
                  label: "My First dataset",
                  fillColor: "rgba(220,220,220,0.2)",
                  strokeColor: "rgba(220,220,220,1)",
                  pointColor: "rgba(220,220,220,1)",
                  pointStrokeColor: "#fff",
                  pointHighlightFill: "#fff",
                  pointHighlightStroke: "rgba(220,220,220,1)",
                  data: [65, 59, 80, 81, 56, 55, 40]
              } ] 
};

var myRadarChart = new Chart(ctx).Radar(data);
$("#add").on( "click", function() {

    var month = $("#month").val();
    var value = $("#value").val();
    var values = new Array();

    values.push(value);

    console.log("adding data...");
    console.log("month:" + month);
    console.log("value:" + value);

    myRadarChart.addData(values, month);

    console.log("data added...");  
});

Upvotes: 1

Views: 1268

Answers (1)

Vasyl Senko
Vasyl Senko

Reputation: 1829

You can use function "getPointsAtEvent", which returns ChartElement:

ChartElement {value: 4, label: "January", datasetLabel: "My First dataset", x: 197.1083317156525, y: 125.62930048634354…}

To work with this function:

var canvas = document.getElementById("myChart") canvas.onclick = function(evt){
var activePoints = myRadarChart.getPointsAtEvent(evt);
activePoints[0].value++;
myRadarChart.update();
console.log(activePoints[0]); };

See full example: http://jsfiddle.net/pevy7vsz/29/

Upvotes: 2

Related Questions