question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

when chartjs change data from receive ajax response , on hover event at bars show old data

See original GitHub issue

hi i am using char js on my laravel project char js is ok and no problem i have filter form data that when clicked on filter button your chart data is changed and recieve from ajax response.

when chart is change data is ok but when hover over chart bar show old data of chart.

my code is :

let requestData = {};

function chartData(url, data) {
    console.log("data is :", data);
    let labels = [];
    let values = [];
    $.ajax({
        url: url,
        type: 'POST',
        data: data,
        dataType: "json",
        async: false,
        success: function (data) {
            $.each(data.data, function (key, value) {
                labels.push(key);
                values.push(value);
            });
        }
    });
    return {
        labels,
        values
    }
}

function updateChart(url, requestData) {
    let results = chartData(url, requestData);

    let ctx = document.getElementById("orders_chart").getContext('2d');
    let orderChart = new Chart(ctx, {
        type: 'bar',
        data: {},
        options: {
            title: {
                display: true,
                text: 'نمودار بر مبنای روز'
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

    orderChart.clear();
    orderChart.data = {
        labels: results.labels,
        datasets: [
            {
                label: "سفارش ها",
                backgroundColor: '#e74c3c',
                data: results.values,
            },
        ]
    };
    orderChart.update();
}

// first initial
updateChart(url, requestData);

$('#filter_btn').click(function () {

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
999DaZacommented, Jun 26, 2019

Either destroy the graph you have made with window.myBar.destroy() or change the data values of the graph then update:

if ( typeof window.myBar == “object”){ window.myBar.data = config.data; window.myBar.update(); } Hope that helps.

0reactions
jimmybrawncommented, Jun 18, 2019

bump!

Read more comments on GitHub >

github_iconTop Results From Across the Web

javascript - Chartjs Bar Chart showing old data when hovering
This problem occurs, when we change the graph data by ajax. it will append the data in the graph. when we hover on...
Read more >
Solved : hovering over Chartjs Bar Chart showing old data
I was facing one problem during working with chartjs. When I change my chartjs bar chart event then hover again, It was showing...
Read more >
jQuery : Chartjs Bar Chart showing old data when hovering
jQuery : Chartjs Bar Chart showing old data when hovering [ Beautify Your Computer : https://www.hows.tech/p/recommended.html ] jQuery ...
Read more >
multiple chart when mouse hover (ajax request) - YouTube
chartjs : - clear chart when mouse hover - chart.js with ajax request.
Read more >
Hovering over line chart shows old chart data issue in chart.js ...
Since, you are initializing a new instance of chart each time the user selects an option, hence you need to destroy the previous...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found