You're welcome. On Friday, November 16, 2012 1:33:50 AM UTC-5, sam wrote: > > thanks again for your help man, will try to fix it now. > > On Friday, November 16, 2012 1:20:50 AM UTC-5, asgallant wrote: >> >> There is an option that helps with the flickering, but you can't always >> use it. See "allowRedraw" in the ATL >> options<https://developers.google.com/chart/interactive/docs/gallery/annotatedtimeline#Configuration_Options>. >> >> Note this only applies to ATL charts, if you use the regular charts, there >> is no flickering. If this presents a problem, there is an alternative to >> ATL charts which involves using >> LineCharts<https://developers.google.com/chart/interactive/docs/gallery/linechart>with >> "annotation" and "annotationText" column >> roles<https://developers.google.com/chart/interactive/docs/roles#annotationrole>in >> combination with a >> ChartRangeFilter<https://developers.google.com/chart/interactive/docs/gallery/controls#chartrangefilter>. >> >> This combo provides 95% of the functionality with all the other goodies >> that the regular charts provide and without the problems of Flash. >> >> On Friday, November 16, 2012 12:03:37 AM UTC-5, sam wrote: >>> >>> 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/jsapi405 >>>>>>>>>>>>>>>>>>>> (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/-/rJ-OOeQLmeAJ. 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.
