I made it work, now chart flickers every time it updates On Thursday, November 15, 2012 10:34:21 PM UTC-5, asgallant wrote: > > Also, why do you have "crossdomain: true" in the AJAX? Isn't the HTML > page being served from the same server as your data? > > On Thursday, November 15, 2012 10:31:17 PM UTC-5, asgallant wrote: >> >> Open the page in Chrome, and look at the developer's console (hit >> ctrl+shift+j to open) - what error message(s) is it throwing? >> >> On Thursday, November 15, 2012 7:50:37 PM UTC-5, sam wrote: >>> >>> that doesn't really fix the issue >>> >>> On Wednesday, November 14, 2012 11:09:57 PM UTC-5, asgallant wrote: >>>> >>>> Off the top, I see your chart div's style isn't formatted correctly: >>>> >>>> <div id="chart_div" style="width: 800; height: 600"></div> >>>> >>>> should be: >>>> >>>> <div id="chart_div" style="width: 800px; height: 600px"></div> >>>> >>>> Setting height and width in the ATL chart's options doesn't do anything. >>>> >>>> On Wednesday, November 14, 2012 9:05:24 PM UTC-5, sam wrote: >>>>> >>>>> my bad, completely missed date format, fixed it, still no luck, please >>>>> see my js attached, >>>>> >>>>> thanks again >>>>> >>>>> On Wednesday, November 14, 2012 9:56:50 AM UTC-5, asgallant wrote: >>>>>> >>>>>> You changed your date format, what you had before was correct for >>>>>> using the JSON data table representation. Other than that, your data >>>>>> seems >>>>>> to be in the correct format (see example with a truncated set of your >>>>>> data >>>>>> and fixed dates here: http://jsfiddle.net/asgallant/2nFWK/). Fix >>>>>> the dates and test again. If it still doesn't work, then post your js >>>>>> code >>>>>> and I'll take a look at that. >>>>>> >>>>>> On Wednesday, November 14, 2012 4:22:18 AM UTC-5, sam wrote: >>>>>>> >>>>>>> attached json output I get, can you check it? I am pretty sure >>>>>>> it's correct though. >>>>>>> thanks >>>>>>> >>>>>>> On Tuesday, November 13, 2012 4:06:53 AM UTC-5, asgallant wrote: >>>>>>>> >>>>>>>> To debug the json, add colsole.log(json); in the AJAX query, and >>>>>>>> then check the developer's console in Chrome/Firefox to see what comes >>>>>>>> out. >>>>>>>> Make sure that you are using the json to create a new DataTable and >>>>>>>> not >>>>>>>> with the addRows method; it should be var data = new >>>>>>>> google.visualization.DataTable(json); in the success callback. >>>>>>>> >>>>>>>> On Monday, November 12, 2012 10:16:20 PM UTC-5, sam wrote: >>>>>>>>> >>>>>>>>> I did update my .php file according to code you provided, and get >>>>>>>>> jason in proper format, >>>>>>>>> >>>>>>>>> commented out addColumn in .html still no luck >>>>>>>>> >>>>>>>>> On Monday, November 12, 2012 8:34:35 PM UTC-5, asgallant wrote: >>>>>>>>>> >>>>>>>>>> Sorry, that's a typo, should have been $r. >>>>>>>>>> >>>>>>>>>> On Monday, November 12, 2012 8:22:17 PM UTC-5, sam wrote: >>>>>>>>>>> >>>>>>>>>>> in this particular cod snippet, where did $i come from? >>>>>>>>>>> >>>>>>>>>>> $sth = mysql_query("SELECT * FROM testpower WHERE datetime > 0"); >>>>>>>>>>> $rows = array(); >>>>>>>>>>> $flag = true; >>>>>>>>>>> >>>>>>>>>>> $table = array(); >>>>>>>>>>> >>>>>>>>>>> $table['cols'] = array( >>>>>>>>>>> >>>>>>>>>>> array('label' => 'date', 'type' => 'datetime'), >>>>>>>>>>> >>>>>>>>>>> array('label' => 'power', 'type' => 'number') >>>>>>>>>>> >>>>>>>>>>> ); >>>>>>>>>>> >>>>>>>>>>> $rows = array(); >>>>>>>>>>> while($r = mysql_fetch_assoc($sth)) { >>>>>>>>>>> $temp = array(); >>>>>>>>>>> >>>>>>>>>>> $temp[] = array('v' => $i['datetime']); // you will probably >>>>>>>>>>> need to transform this into the Date object format >>>>>>>>>>> $temp[] = array('v' => (float) $i['power']); // typecast to int, >>>>>>>>>>> float, whatever - if you don't, it will be interpreted as a string >>>>>>>>>>> >>>>>>>>>>> $rows[] = array('c' => $temp); >>>>>>>>>>> } >>>>>>>>>>> >>>>>>>>>>> $table['rows'] = $rows; >>>>>>>>>>> >>>>>>>>>>> $jsonTable = json_encode($table); >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> On Monday, November 12, 2012 7:41:01 PM UTC-5, asgallant wrote: >>>>>>>>>>>> >>>>>>>>>>>> Yes, that's the format you need. Here's a basic bit of PHP >>>>>>>>>>>> code that shows how to build it: >>>>>>>>>>>> https://groups.google.com/d/msg/google-visualization-api/GK0zwNbIwUo/i9DhpOUSKMEJ >>>>>>>>>>>> >>>>>>>>>>>> On Monday, November 12, 2012 7:32:06 PM UTC-5, sam wrote: >>>>>>>>>>>>> >>>>>>>>>>>>> are you talking about sampleData.json format? >>>>>>>>>>>>> >>>>>>>>>>>>> same as in this example ? >>>>>>>>>>>>> https://developers.google.com/chart/interactive/docs/php_example >>>>>>>>>>>>> >>>>>>>>>>>>> >>>>>>>>>>>>> On Monday, November 12, 2012 6:46:31 PM UTC-5, asgallant wrote: >>>>>>>>>>>>>> >>>>>>>>>>>>>> Hmmm...I don't see anything wrong with the code, can you post >>>>>>>>>>>>>> a link to the live version on your school's server? >>>>>>>>>>>>>> >>>>>>>>>>>>>> Incidentally, the data in the JSON won't work. Your numbers >>>>>>>>>>>>>> have to be unquoted, and the dates won't work as is. That date >>>>>>>>>>>>>> format is >>>>>>>>>>>>>> correct if you are using the JSON implementation of a DataTable, >>>>>>>>>>>>>> but not >>>>>>>>>>>>>> for using the addRows method. Given how you are fetching the >>>>>>>>>>>>>> data, you'll >>>>>>>>>>>>>> either have to process it in javascript before passing it to >>>>>>>>>>>>>> addRows, or >>>>>>>>>>>>>> change the data structure to use the full DataTable JSON >>>>>>>>>>>>>> structure. >>>>>>>>>>>>>> >>>>>>>>>>>>>> On Monday, November 12, 2012 6:01:37 PM UTC-5, sam wrote: >>>>>>>>>>>>>>> >>>>>>>>>>>>>>> thanks for reply asgallant, I built everything by reading >>>>>>>>>>>>>>> all your previous comments history, I was testing everything >>>>>>>>>>>>>>> locally on my >>>>>>>>>>>>>>> laptop using xampp got the 405 error, moved everything to my >>>>>>>>>>>>>>> school >>>>>>>>>>>>>>> provided space on .edu, same error. >>>>>>>>>>>>>>> all your previous comments on other threads are really >>>>>>>>>>>>>>> helpful. >>>>>>>>>>>>>>> >>>>>>>>>>>>>>> my .php file output sample, it's really big file, just >>>>>>>>>>>>>>> showed a few lines, from echo json_encode($output); >>>>>>>>>>>>>>> >>>>>>>>>>>>>>> [["Date(2012,04,12,12,50,02)","15662","5589","7999","2074","1488","425"],["Date(2012,04,12,1,00,03)","15662","5589","7999","2074","1488","425"],["Date(2012,04,12,1,10,02)","15242","5555","7603","2084","1430","413"]] >>>>>>>>>>>>>>> >>>>>>>>>>>>>>> .html file : >>>>>>>>>>>>>>> >>>>>>>>>>>>>>> <html> >>>>>>>>>>>>>>> <head> >>>>>>>>>>>>>>> <script type='text/javascript' src=' >>>>>>>>>>>>>>> http://www.google.com/jsapi'></script> >>>>>>>>>>>>>>> <script type="text/javascript" src="jquery.min.js"></script> >>>>>>>>>>>>>>> <script type='text/javascript'> >>>>>>>>>>>>>>> google.load('visualization', '1', >>>>>>>>>>>>>>> {'packages':['annotatedtimeline']}); >>>>>>>>>>>>>>> google.setOnLoadCallback(drawChart); >>>>>>>>>>>>>>> >>>>>>>>>>>>>>> function drawChart() { >>>>>>>>>>>>>>> var data = new google.visualization.DataTable(); >>>>>>>>>>>>>>> data.addColumn('datetime', 'Date'); >>>>>>>>>>>>>>> data.addColumn('number', 'n1'); >>>>>>>>>>>>>>> data.addColumn('number', 'n2'); >>>>>>>>>>>>>>> data.addColumn('number', 'n3'); >>>>>>>>>>>>>>> data.addColumn('number', 'n4'); >>>>>>>>>>>>>>> data.addColumn('number', 'n5'); >>>>>>>>>>>>>>> data.addColumn('number', 'n6'); >>>>>>>>>>>>>>> var now = new Date(); >>>>>>>>>>>>>>> >>>>>>>>>>>>>>> var chart = new >>>>>>>>>>>>>>> google.visualization.AnnotatedTimeLine(document.getElementById('chart_div')); >>>>>>>>>>>>>>> function updateData () { >>>>>>>>>>>>>>> $.ajax({ >>>>>>>>>>>>>>> url: 'http://localhost/db_chartjson.php', >>>>>>>>>>>>>>> dataType: 'json', >>>>>>>>>>>>>>> type: 'POST', >>>>>>>>>>>>>>> crossDomain: true, >>>>>>>>>>>>>>> success: function (json) { >>>>>>>>>>>>>>> data.removeRows(0, data.getNumberOfRows()); >>>>>>>>>>>>>>> data.addRows(json); >>>>>>>>>>>>>>> chart.draw(data,{width: 400, height: 240}); >>>>>>>>>>>>>>> // refresh data in 1 minute >>>>>>>>>>>>>>> setTimeout(function () { >>>>>>>>>>>>>>> updateData(); >>>>>>>>>>>>>>> }, 60000); >>>>>>>>>>>>>>> } >>>>>>>>>>>>>>> }); >>>>>>>>>>>>>>> } >>>>>>>>>>>>>>> } >>>>>>>>>>>>>>> >>>>>>>>>>>>>>> </script> >>>>>>>>>>>>>>> </head> >>>>>>>>>>>>>>> <body> >>>>>>>>>>>>>>> <div id='chart_div' ></div> >>>>>>>>>>>>>>> </body> >>>>>>>>>>>>>>> </html> >>>>>>>>>>>>>>> >>>>>>>>>>>>>>> On Monday, November 12, 2012 5:50:49 PM UTC-5, asgallant >>>>>>>>>>>>>>> wrote: >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> Can you post your source code? >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> Since you're using xampp, I assume you're accessing the >>>>>>>>>>>>>>>> HTML file through the webserver rather than locally, but if >>>>>>>>>>>>>>>> you're not, >>>>>>>>>>>>>>>> then this could be a Flash security issue (see the >>>>>>>>>>>>>>>> Notes<https://developers.google.com/chart/interactive/docs/gallery/annotatedtimeline#notes>section >>>>>>>>>>>>>>>> in the ATL documentation for details). >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> On Monday, November 12, 2012 5:22:37 PM UTC-5, sam wrote: >>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>>> Hi, >>>>>>>>>>>>>>>>> I am using mysql/php to create json data, in addition >>>>>>>>>>>>>>>>> have test.html that read json and draws annotated timeline, >>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>>> keep getting "OPTIONS http://www.google.com/jsapi 405 >>>>>>>>>>>>>>>>> (Method Not Allowed)" error >>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>>> "XMLHttpRequest cannot load http://www.google.com/jsapi. >>>>>>>>>>>>>>>>> Origin http://nova.it.rit.edu is not allowed by >>>>>>>>>>>>>>>>> Access-Control-Allow-Origin." >>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>>> need urgent help, I am using xampp >>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>>> thanks >>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>>
-- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/Lc0YK-OEGi4J. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
