Changing data when click button in chart.js

Jwon Published at Dev

Jwon

I'm working on some website project, in I have problem with charts.js, I want to change the data inside of the chart, So when i click button the data value is changing, but i'm stuck on it, i don't know how to do it. Here's the example of the code that similar with my project Chart.js.

var data = {
    labels: ['January', 'February', 'March'],
    
    datasets: [
        {
        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: [30,120,90]
        },
        {
        fillColor: "rgba(100,220,220,0.7)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [10,70,110]
        }
    ]
    };

    var context = document.querySelector('#graph').getContext('2d');
    new Chart(context).Line(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<canvas id="graph" width="800px" height="400px"></canvas>

<button>
Option 1
</button>
<button>
Option 2
</button>

Shree

Call Chart(context).Line(New data); on button click to reload your chart.

var data = {
    labels: ['January', 'February', 'March'],
    
    datasets: [
        {
        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: [30,120,90]
        },
        {
        fillColor: "rgba(100,220,220,0.7)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [10,70,110]
        }
    ]
    };

var data1 = {
    labels: ['March', 'Apr', 'May'],
    
    datasets: [
        {
        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: [50,100,140]
        },
        {
        fillColor: "rgba(100,220,220,0.7)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [40,70,200]
        }
    ]
    };

var context = document.querySelector('#graph').getContext('2d');
new Chart(context).Line(data);
    
$("#btn1").on("click", function() {
     var context1 = document.querySelector('#graph').getContext('2d');
    new Chart(context1).Line(data);
  });
$("#btn2").on("click", function() {
    var context2 = document.querySelector('#graph').getContext('2d');
    new Chart(context2).Line(data1);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<canvas id="graph" width="800px" height="400px"></canvas>

<button id="btn1">
Option 1
</button>
<button id="btn2">
Option 2
</button>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2020-10-21

Comments

0 comments

Prev: iOS - pushViewController vs presentModalViewController difference

Switch chart.js data with button click

data in charts of charts.js is changing when I click in the line chart

Vue Chart.js - Chart is not updating when data is changing

Chart.js - Show new data on button click

setText not changing or updating when button click

Changing data when click button in chart.js

Changing data when click button in chart.js

pump.io port in URL

Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

How to import an asset in swift using Bundle.main.path() in a react-native native module

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

Using Response.Redirect with Friendly URLS in ASP.NET

Can a 32-bit antivirus program protect you from 64-bit threats

Double spacing in rmarkdown pdf

How to fix "pickle_module.load(f, **pickle_load_args) _pickle.UnpicklingError: invalid load key, '<'" using YOLOv3?

3D Touch Peek Swipe Like Mail

Bootstrap 5 Static Modal Still Closes when I Click Outside

Assembly definition can't resolve namespaces from external packages

Vector input in shiny R and then use it

Emulator wrong screen resolution in Android Studio 1.3

Svchost high CPU from Microsoft.BingWeather app errors

Graphics Context misaligned on first paint

Python connect to firebird docker database

Is this docker-for-mac password dialog legit?

How to save models trained locally in Amazon SageMaker?