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/-/iNSVfBgprssJ. 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.
