Bar Chart: How to update the chart?

user_14420014 0
Viewed 77

I am using this plugin for the bar chart. I need to update the values day, week and month wise but the update function inside the plugin is not working.

Here is the codepen.

HTML

<div id="chart">
   <h2 class="section-title">Images processed</h2>
   <div class="cal-options">
      <span>Day</span>
      <span>Week</span>
      <span class="active">Month</span>
   </div>
 </div>

JS


    if($('#chart').length){
      $('#chart').barChart({
        height : 388,
        bars : [
          { 
            vertical: true,
            drawToolTip: false,
            stepsCount : 5,
            barGap : 5,
            name : 'Dataset 1',
            values : [
              ["May",33],
              ["June",11],
              ["July",23],
              ["August",16],
              ["September",28],
              ["October",21],
              ["November",32],
              ["December",19],
              ["January",13],
              ["February",19],
              ["March",24],
              ["April",18],
            ] 
          },
            { 
              name : 'Dataset 2',
              values : [
                ["May",5],
                ["June",5],
                ["July",5],
                ["August",5],
                ["September",5],
                ["October",5],
                ["November",5],
                ["December",5],
                ["January",5],
                ["February",5],
                ["March",5],
                ["April",5],
              ] 
            },
          ],
        colors: [
          "#FF7D9C", "#6BBEB6", "#000000"
        ]
      });
    }

    $(".cal-options span").each(function(){
      $(this).click(function(){
        $(".cal-options span").removeClass("active");
        $(this).addClass("active");
        var newoptions = {
                  bars : [
          { 
            vertical: true,
            drawToolTip: false,
            stepsCount : 5,
            barGap : 5,
            name : 'Dataset 1',
            values : [
              ["new-May",33],
              ["new-June",11],
              ["new-July",23],
              ["new-August",16],
              ["new-September",28],
              ["new-October",21],
              ["new-November",32],
              ["new-December",19],
              ["new-January",13],
              ["new-February",19],
              ["new-March",24],
              ["new-April",18],
            ] 
          },
            { 
              name : 'Dataset 2',
              values : [
                ["new-May",5],
                ["new-June",5],
                ["new-July",5],
                ["new-August",5],
                ["new-September",5],
                ["new-October",5],
                ["new-November",5],
                ["new-December",5],
                ["new-January",5],
                ["new-February",5],
                ["new-March",5],
                ["new-April",5],
              ] 
            },
          ],
        }
        // $("#chart").barChart({
        //   update: function(){};
        // })
      });
    });

Not able to update the chart when clicked on the Day, Week, Month buttons. Can someone please help?

bar-chart css html jquery javascript
1 Answers

Draw a graph using a function of type with a new value. The following code shows how to do it.

var options = [{
    vertical: true,
    drawToolTip: false,
    stepsCount: 5,
    barGap: 5,
    name: 'Dataset 1',
    values: [
      ["May", 33],
      ["June", 11],
      ["July", 23],
      ["August", 16],
      ["September", 28],
      ["October", 21],
      ["November", 32],
      ["December", 19],
      ["January", 13],
      ["February", 19],
      ["March", 24],
      ["April", 18],
    ]
  },
  {
    name: 'Dataset 2',
    values: [
      ["May", 5],
      ["June", 5],
      ["July", 5],
      ["August", 5],
      ["September", 5],
      ["October", 5],
      ["November", 5],
      ["December", 5],
      ["January", 5],
      ["February", 5],
      ["March", 5],
      ["April", 5],
    ]
  },
]


if ($('#chart').length) {
  DrawChar(options)
}
$(".cal-options span").each(function() {
  $(this).click(function() {
    $(".cal-options span").removeClass("active");
    $(this).addClass("active");
    var newoptions = [{
        vertical: true,
        drawToolTip: false,
        stepsCount: 5,
        barGap: 5,
        name: 'Dataset 1',
        values: [
          ["new-May", 33],
          ["new-June", 11],
          ["new-July", 23],
          ["new-August", 16],
          ["new-September", 28],
          ["new-October", 21],
          ["new-November", 32],
          ["new-December", 19],
          ["new-January", 13],
          ["new-February", 19],
          ["new-March", 24],
          ["new-April", 18],
        ]
      },
      {
        name: 'Dataset 2',
        values: [
          ["new-May", 5],
          ["new-June", 5],
          ["new-July", 5],
          ["new-August", 5],
          ["new-September", 5],
          ["new-October", 5],
          ["new-November", 5],
          ["new-December", 5],
          ["new-January", 5],
          ["new-February", 5],
          ["new-March", 5],
          ["new-April", 5],
        ]
      },
    ];
    DrawChar(newoptions);
  });
});

function DrawChar(chartoptions) {
  $('#chart').barChart({
    height: 388,
    bars: chartoptions,
    colors: [
      "#FF7D9C", "#6BBEB6", "#000000"
    ]
  });
}
user_150195360
Related