There are a few things you have to be careful with here. The first (and
likely the immediate cause of your problem) is on this line:
var data = new google.visualization.DataTable(html);
Your response is structured as a Query response object, which contains a
DataTable object, but is not in and of itself a DataTable object. Use this
line instead:
var data = new google.visualization.DataTable(html.table);
Since the DataTable contains all of the column information that you need,
you should not call the #addColumn method of the DataTable to add
additional columns. Delete these lines from your AJAX call:
data.addColumn('datetime', 'Datum');
data.addColumn('number', 'Leistung');
You could also experience problems with having a second, separate
AnnotatedTimeline that overwrites your first (you create one on page load
and a new one every time the AJAX call is made). Try rearranging your code
like this:
$(function(){
window.prettyPrint && prettyPrint();
});
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Datum');
data.addColumn('number', 'Leistung');
data.addRows([
[new Date(1361310226000), 24],
[new Date(1361401138000), 18],
[new Date(1361487506000), 9],
[new Date(1361532551000), 13],
[new Date(1363087016000), 276]
]);
var annotatedtimeline = new
google.visualization.AnnotatedTimeLine(document.getElementById('visualization'));
var options = {
displayAnnotations: true,
allowRedraw: true
};
$('#dp2').datepicker().on('changeDate', function(ev){
$.ajax({
type: "GET",
url: "visualization/leistung/jahr/" + ev.date.valueOf() +
"/ajax",
dataType: "json",
success: function(html){
data = new google.visualization.DataTable(html.table);
annotatedtimeline.draw(data, options);
},
error: function(jqXHR,error, errorThrown) {
if(jqXHR.status&&jqXHR.status==200){
alert(jqXHR.responseText);
}else{
alert("Something went wrong");
}
}
});
});
annotatedtimeline.draw(data, options);
}
google.load('visualization', '1', {packages: ['annotatedtimeline'],
callback: drawVisualization});
That gives you a single DataTable and AnnotatedTimeline that get updated
every time the AJAX call is made, instead of spawning new entities on every
call.
On Sunday, November 10, 2013 5:27:42 AM UTC-5, Markus Schlick wrote:
>
> Hello,
> I have a problem with the reload of Annotated Time via AJAX
> Here is my Code:
>
>> <!DOCTYPE html>
>> <html>
>> <head>
>> <meta charset="UTF-8" />
>> <title>seiteTitle</title>
>> <base href="http://localhost/";>
>> <meta name="viewport" content="width=device-width, initial-scale=1.0">
>> <!-- Latest compiled and minified CSS -->
>> <link rel="stylesheet"
>> href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css";>
>> <!-- Optional theme -->
>> <link rel="stylesheet"
>> href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css";>
>> <script src="http://code.jquery.com/jquery.min.js";></script>
>> <script
>> src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js";></script>
>> </head>
>> <body>
>> <link
>> href="http://www.eyecon.ro/bootstrap-datepicker/css/datepicker.css";
>> rel="stylesheet">
>> <script
>> src="http://www.eyecon.ro/bootstrap-datepicker/js/bootstrap-datepicker.js";></script>
>> <script>
>> $(function(){
>> window.prettyPrint && prettyPrint();
>> $('#dp2').datepicker()
>> .on('changeDate', function(ev){
>> $.ajax({
>> type: "GET",
>> url:
>> "visualization/leistung/jahr/" + ev.date.valueOf() + "/ajax",
>> dataType: "json",
>> success: function(html){
>> var data = new
>> google.visualization.DataTable(html);
>> data.addColumn('datetime', 'Datum');
>> data.addColumn('number', 'Leistung');
>> var
>> annotatedtimeline = new
>> google.visualization.AnnotatedTimeLine(document.getElementById('visualization'));
>>
>> annotatedtimeline.draw(data, {'displayAnnotations': true, 'allowRedraw':
>> true});
>>
>> },
>> error: function(jqXHR,error, errorThrown) {
>> if(jqXHR.status&&jqXHR.status==200){
>> alert(jqXHR.responseText);
>> }else{
>> alert("Something went wrong");
>> }
>> }
>> });
>> });
>> });
>> </script>
>>
>> <nav class="navbar navbar-default" role="navigation">
>> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
>> <ul class="nav navbar-nav">
>> <li><input type="text" class="span2" value="2013-11-09"
>> data-date-format="yyyy-mm-dd" id="dp2" style="margin: 7px 0 0 7px;"></li>
>> </ul>
>> </div>
>> </nav>
>> <script type="text/javascript" src="http://www.google.com/jsapi";></script>
>> <script type="text/javascript">
>> google.load('visualization', '1', {packages: ['annotatedtimeline']});
>> function drawVisualization() {
>> var data = new google.visualization.DataTable();
>> data.addColumn('datetime', 'Datum');
>> data.addColumn('number', 'Leistung');
>> data.addRows([
>> [new Date(1361310226000), 24]
>> , [new Date(1361401138000), 18]
>> , [new Date(1361487506000), 9]
>> , [new Date(1361532551000), 13]
>> , [new Date(1363087016000), 276]
>> ]);
>>
>> var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
>> document.getElementById('visualization'));
>> annotatedtimeline.draw(data, {'displayAnnotations': true,
>> 'allowRedraw': true});
>> }
>>
>> google.setOnLoadCallback(drawVisualization);
>> </script>
>> <div id="visualization" style="width: 800px; height: 400px;"></div>
>> </body>
>> </html>
>>
>>
> This will call
> http://localhost/visualization/leistung/jahr/1383692400000/ajax on change
> the date.
> The following is the return to jquery:
>
>> {"version":0.6,"reqId":0,"status":"ok","sig":2147483647,"table":{"cols":[{"id":"A","label":"Datum","pattern":"","type":"datetime"},{"id":"B","label":"Leistung","pattern":"","type":"number"}],"rows":[{"c":[{"v":"date(1361310226000)","f":null},{"v":24,"f":null}]},{"c":[{"v":"date(1361401138000)","f":null},{"v":18,"f":null}]},{"c":[{"v":"date(1361487506000)","f":null},{"v":9,"f":null}]},{"c":[{"v":"date(1361532551000)","f":null},{"v":13,"f":null}]},{"c":[{"v":"date(1363087016000)","f":null},{"v":276,"f":null}]}]}}
>>
>>
> So it have to Draw the same Time Line as on the first request of the page.4
> But it shows "no data available" on the Time Line, with no error on
> FireBug.
>
> Did annybody see the misstake?
> Thanks a lot.
>
--
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
