CODEWITHSUNDEEP
javascriptjquery
Hussam Cheema
Hussam Cheema

Reputation: 536

How to change Morris Chart's data dynamically in JavaScript?

How do I change data values dynamically, like if I make changes in one JavaScript file, the values linked with this file automatically change?

$('#new').click(function(){
  goodComments++;
  badComments++;
  neutralComments++;
});

Whenever I click on the 'new' button I get updated values of 'goodComments', 'badComments', 'neutralComments' in the script given below. This script will run only once, that's why I want to change data parameters dynamically.

<script>
Morris.Bar({
            element: 'bar-example',
            data: [
                { y: 'Comment Types', a:goodComments, b: badComments, c:neutralComments },
            ],
            xkey: 'y',
            ykeys: ['a', 'b', 'c'],
            labels: ['Good Comment', 'Bad Comment', 'Neutral Comment']
        });
</script>

Upvotes: 3

Views: 5085

Answers (1)

loretoparisi
loretoparisi

Reputation: 16301

So you have first to get a instance of the Morris.Bar chart:

var G = Morris.Bar(options);

you pass along the chart options object. This object will come with a data section that needs to be updated, so we create a updateData function to return this data structure as the variable that we need to update:

function updateData() {
    return [{
      y: 'Comment Types',
      a: goodComments,
      b: badComments,
      c: neutralComments
    }];
  }

So that we can create a options object like:

var options = {
    element: 'bar-example',
    data: updateData(),
    xkey: 'y',
    ykeys: ['a', 'b', 'c'],
    labels: ['Good Comment', 'Bad Comment', 'Neutral Comment']
  }

We now attach the event to the click button where when fired, the variables values will be updated and the new data will be passed to the chart using the setData method:

$('#new').click(function() {
    goodComments++;
    badComments++;
    neutralComments++;
    G.setData( updateData() );
  });

So every time this event is fired, the counters are updated and the chart backed by G variable will be updated by setData.

You can now try the result here. Click the button to see values changing in the labels and in the chart.

  var goodComments = 0,
    badComments = 3,
    neutralComments = 1,
    G;

  function updateData() {
    return [{
      y: 'Comment Types',
      a: goodComments,
      b: badComments,
      c: neutralComments
    }];
  }

  $('#new').click(function() {
    goodComments++;
    badComments++;
    neutralComments++;
    //console.log(goodComments, badComments, neutralComments)
    G.setData(updateData());
  });

  var G = Morris.Bar({
    element: 'bar-example',
    data: updateData(),
    xkey: 'y',
    ykeys: ['a', 'b', 'c'],
    labels: ['Good Comment', 'Bad Comment', 'Neutral Comment']
  });
<!DOCTYPE html>
<html>

<head>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
  <meta charset=utf-8 />
  <title>Morris.js Bar Chart Example</title>
</head>

<body>
  <div id="bar-example"></div>
  <button id="new">Click me</button>
</body>

</html>

Upvotes: 3

Related Questions