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);
}
});
--
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+unsubscr...@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.
