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');

}

shresha · Answer 1 · 2015-12-04T05:20:36.843

0

you can remove all the elements inside the canvas element so that you can then again plot into a newly refreshed canvas

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

edited Dec 04 '15 at 05:20

answered Dec 03 '15 at 09:51

shresha

147
10

if i add this code chart itself not coming could u pls tell me where i need to add this piece of code – ramesh Dec 03 '15 at 14:17
@ramesh just add this before the statement which will draw your plot so that before drawing the plot the canvas element sub-components would be removed and you get fresh canvas element without any sub-components – shresha Dec 04 '15 at 03:49
Uncaught TypeError: $(...).selectAll is not a function i am getting this error in console. if i add before creating canvas element and chart itself not coming – ramesh Dec 04 '15 at 04:05
i m sorry selectAll() is a d3.js method and for $ to be applicable u must include jquery which u may already know, so just do `$("#subSectionalChartCanvas").empty()` – shresha Dec 04 '15 at 04:21
But still canvas data is not clearing when i move my mouse over the bar chart previous data is coming i added above of this line var ctx = document.getElementById("subSectionalChartCanvas").getContext("2d"); new Chart(ctx).Bar(barChartData,options); – ramesh Dec 04 '15 at 09:13
if you are using chart.js why don`t you use update() method – shresha Dec 04 '15 at 09:42
based on my drop down value data will change. Really i dont know how to use update method could you please help me how to call update method in this regard – ramesh Dec 04 '15 at 09:57
and friend ur opacity is set to 0 in div – shresha Dec 04 '15 at 10:15
even if i set opacity to zero still i am getting previous value of the chart. helpless – ramesh Dec 04 '15 at 13:10

score 0 · Answer 2 · answered Dec 04 '15 at 10:25

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

while hovering it should not give previous selected value data that is my issue. — ramesh, Dec 04 '15 at 13:17
Here have a look at this [link](http://stackoverflow.com/questions/17354163/dynamically-update-values-of-a-chartjs-chart) This may solve your issue — shresha, Dec 04 '15 at 15:57

How to remove old data in a bar chart

2 Answers2