CODEWITHSUNDEEP
javascriptjquerycsschartsgoogle-visualization
Madpop
Madpop

Reputation: 725

Google Chart not displaying correctly in Chart Area

Actually, I am facing related to the Google charts while implementing with Dynamic data. Here the issue When ever I am clicking a tab that particular data has to be displayed in Chart.Suppose Say like Clicking the current Day is displaying the below result in chartenter image description here

After pressing on the tab say after pressing Last week it is not displaying chart correctly in chart area enter image description here

Suppose if u press again Current Day the char is displayed like this enter image description here

Here the chart area is not working properly after having first click and second click

`google.charts.load('current', { 'packages': ['bar'] });

$('#t1').click(function () {
    google.charts.setOnLoadCallback(BarC);
    function BarC() {

        var jsonData = $.ajax({
            type: 'GET',
            url: xxxx.xxxx.xxxx,

            dataType: 'json',

        }).done(function (results) {

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'data1');
            data.addColumn('number', 'data2');
            data.addColumn('number', 'data3');
            data.addColumn('number', 'data4');

            data.addRows(results.length);
            for (i = 0; i < results.length; i++) {
                data.setValue(i, 0, results[i]["data1"]);
                data.setValue(i, 1, parseInt(results[i]["data2"]));
                data.setValue(i, 2, parseInt(results[i]["data3"]));
                data.setValue(i, 3, parseInt(results[i]["data4]));
            }

            var options = {

                backgroundColor: 'transparent',

                bars: 'vertical',
                chartArea: { left: 0, top: 0, width: '100%', height: '100%' }// Required for Material Bar Charts.
            };

            var chart = new google.charts.Bar(document.getElementById('chart'));
           chart.draw(data, google.charts.Bar.convertOptions(options));
        }
        );
    }

});`

Upvotes: 1

Views: 507

Answers (1)

William Valhakis
William Valhakis

Reputation: 370

Try 

google.charts.setOnLoadCallback(function() {

  $('#t1').click(function () {
    // ...
  });

  $('#t2').click(function () {
    // ...
  });

  // ...

});

https://embed.plnkr.co/19CellQvdGZTjzf9hikU/

Upvotes: 1

Related Questions