Google "Annotation Chart" is not responsive

[Arghya chakroborty]

Hi,

I am trying to create an Annotation Chart for Time Series data. So far, the code snippet given in "Google Charts" page has helped (THANKS A LOT) & the chart gets properly displayed ....

But when I try to access the chart (projected in a web page) in my mobile, the chart doesn't get resized. 

I have tried various CSS settings in the div where the chart is getting added to, but nothing worked. Please help ....

I am using Bootstrap CSS & Angular JS for my web site. Below are the source codes for reference.

Regards,

Arghya

============================ HTML CODE ===========================================

<div class="jumbotron">

<div class="row">

<div class="col-md-12">

<div id='chart_div' style="max-width: 100%; min-height: 450px; border: 1px solid black;"></div>

</div>

</div>

</div>

============================== JS CODE ==============================================

app.controller("timeSeriesController", function($scope, $http) {

    $http.get("util.php?method=getTimeSeriesData")

    .then(function(response) {

        $scope.tsRecords = response.data; // response.data.records;

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

google.charts.setOnLoadCallback($scope.drawChart);

    });

    

    $scope.drawChart = function() {

        var data = new google.visualization.DataTable();

        data.addColumn('date', 'Date');

        data.addColumn('number', 'Kepler-22b mission');

        //data.addColumn('string', 'Kepler title');

        //data.addColumn('string', 'Kepler text');

        data.addColumn('number', 'Gliese 163 mission');

        //data.addColumn('string', 'Gliese title');

        //data.addColumn('string', 'Gliese text');

        data.addColumn('number', 'Dummy Text');

        data.addRows([

          [new Date(2314, 2, 15, 23, 12, 05), 12400,

                                  10645,

                                  11111

                                  ],

          [new Date(2314, 2, 16, 11, 16, 30), 24045,

                                  12374,

                                  22222

                                  ],

          [new Date(2314, 2, 17, 08, 22 , 55), 35022,

                                  15766,

                                  12121

                                  ],

          [new Date(2314, 2, 18 , 18, 11, 34), 12284, 

                                  34334,

                                  33333

                                  ],

          [new Date(2314, 2, 19, 03, 55, 17), 8476,

                                  66467,

                                  55555

                                  ],

          [new Date(2314, 2, 20, 15, 00, 03), 0,

                                  79463,

                                  23444

                                  ]

        ]);

        var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

        var options = {

          displayAnnotations: true

        };

        chart.draw(data, options);

    }

});

[Daniel LaLiberte]

Hi Arghya,

Charts don't recognize resize events, so you will have to detect that yourself and redraw the chart with the new size.  Hope that helps.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/706cf506-d368-4259-bd23-24e3c4084458%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA