How to remove old data in a bar chart

Question

I am passing JSON data to my bar chart and data is based on dropdown value. So on change of drop down graph value should change. it is changing but when we hover last visited value is coming bar chart is shaking too. Please give your suggestion.

<div class="col_half" id="subSectionalChart" style="opacity: 0;">
    <canvas id="subSectionalChartCanvas" width="547" height="400"></canvas>
</div>

function subSectionalGraphCall(data){

    var livelabels=[];

    var livedata=[];

    for(var i=0; i<data.length; i++){

        livelabels.push(data[i].subSectionVisited);

        livedata.push(data[i].subSectionCount);
    }

    var options = { 

              scaleBeginAtZero : true,
              scaleShowGridLines : true,
              scaleOverlay: false,
              scaleShowGridLines: true,
              scaleGridLineColor : "rgba(0,0,0,.05)",
              scaleGridLineWidth : 1,
              scaleShowHorizontalLines: true,
              scaleShowVerticalLines: true,
              barShowStroke : true,
              barStrokeWidth : 2,
              barValueSpacing : 5,
              barDatasetSpacing : 1,
    };

    var barChartData = {

        labels : livelabels,

        datasets : [

            {
                fillColor : "rgba(200,147,165,0.5)",

                strokeColor : "rgba(151,187,205,1)",

                data : livedata,

            }

        ]

    };

    function show(){

        var ctx = document.getElementById("subSectionalChartCanvas").getContext("2d");

        new Chart(ctx).Bar(barChartData,options);

    }
    $('#subSectionalChart').appear( function(){ $(this).css({ opacity: 1 }); setTimeout(show,300); },{accX: 20, accY: -10},'easeInCubic');

}

Answer 1

您可以删除canvas元素内的所有元素，以便再次绘图到新刷新的画布中

$("#subSectionalChartCanvas").empty();

Answer 2

here do this

<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
</head>
<body>
    <div class="col_half" id="subSectionalChart" style="opacity: 1;">
        <canvas id="subSectionalChartCanvas" width="547" height="400"></canvas>
    </div>
    <script>

        var data = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
                {
                    label: "My First dataset",
                    fillColor: "rgba(220,220,220,0.5)",
                    strokeColor: "rgba(220,220,220,0.8)",
                    highlightFill: "rgba(220,220,220,0.75)",
                    highlightStroke: "rgba(220,220,220,1)",
                    data: [65, 59, 80, 81, 56, 55, 40]
                }
            ]
        };

        var options = { 

                  scaleBeginAtZero : true,
                  scaleShowGridLines : true,
                  scaleOverlay: false,
                  scaleShowGridLines: true,
                  scaleGridLineColor : "rgba(0,0,0,.05)",
                  scaleGridLineWidth : 1,
                  scaleShowHorizontalLines: true,
                  scaleShowVerticalLines: true,
                  barShowStroke : true,
                  barStrokeWidth : 2,
                  barValueSpacing : 5,
                  barDatasetSpacing : 1,
        };

        setTimeout(test, 5000);

        var ctx = document.getElementById("subSectionalChartCanvas").getContext("2d");

        var x = new Chart(ctx).Bar(data,options);

        function test() {
            var data = {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [
                    {
                        label: "My First dataset",
                        fillColor: "rgba(220,220,220,0.5)",
                        strokeColor: "rgba(220,220,220,0.8)",
                        highlightFill: "rgba(220,220,220,0.75)",
                        highlightStroke: "rgba(220,220,220,1)",
                        data: [1, 2, 3, 4, 5, 6, 7]
                    }
                ]
            };

            x.clear();
            x = new Chart(ctx).Bar(data,options);
        }

    </script>
</body>
</html>

this might help you get an idea

How to remove old data in a bar chart

Question

2 answers

solution1
0 2015-12-03 09:51:47

solution2
0 2015-12-04 10:25:44

How to remove old data in a bar chart

Question

2 answers

solution1 0 2015-12-03 09:51:47

solution2 0 2015-12-04 10:25:44

solution1
0 2015-12-03 09:51:47

solution2
0 2015-12-04 10:25:44