I tried your code and get Uncaught Error: Container is not defined as an error as with my code the chart at least loads. Its ok though I'm sure ill figure it out eventually.
On Monday, April 6, 2015 at 3:18:05 PM UTC-6, Sergey Grabkovsky wrote: > > Hi, > > As I said in my other post, you are currently calling google.load for > every update. This can cause undefined behavior (because multiple instances > of the charts code will load), and is completely unnecessary. I wrote a > little resource management code for you and formatted your javascript to be > slightly more readable. The file is attached. Please let me know if you are > confused about anything, I will be happy to explain it in more detail or > point you to more resources where you can learn about how to do these > things. > > To start you off, this stackoverflow has some fairly good advice for how > to manage multiple callbacks (although it doesn't list my solution): > http://stackoverflow.com/questions/10004112/how-can-i-wait-for-set-of-asynchronous-callback-functions > > On Mon, Apr 6, 2015 at 4:35 PM G Z <[email protected] <javascript:>> wrote: > >> I'm trying to redraw my chart as my update function calls the next set of >> data, currently I'm calling a function that wraps the chart logic. I'm new >> to Javascript and google chars so please be kind, >> >> >> >> <!DOCTYPE HTML> >> >> <html> >> >> <head> >> >> <title>TheWayWardJourney</title> >> >> >> >> <script src="cynergi.js"></script> >> >> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/ >> jquery.min.js"></script> >> >> <script type="text/javascript" src="https://www.google.com/jsapi >> "></script> >> >> <script> >> >> function updateData(){ >> >> // this is retrieving rows from the db and looping through them. >> >> var data = Cynergi.get('http://.com:3000/computer_stats?order=time.asc'); >> >> var data_array = [] >> >> $.each( data, function( i, item ) { >> >> html_insert = 'Computer Name:' + item.computer_name + >> '<br>Operating System:' + item.operating_system + '<br>CPU Model: ' + >> item.cpu_model + '<br>Cores Assigned: ' + item.cores + '<br>CPU MHz: ' + >> item.cpu_mhz + '<br>CPU Cache: ' + item.cpu_cache + '<br>Net Devices: ' + >> item.net_devices + '<br>Devices: ' + item.devices; >> >> >> >> stats = 'Total Memory: ' + item.total_memory + '<br>Free Memory:' + >> item.free_memory + '<br> Active Memory:' + item.active_memory + '<br> >> Bounce Memory:' + item.bounce_memory + '<br> Buffered Memory:' + >> item.buffers_memory + '<br> Locked Memory:' + item.locked_memory + '<br> >> Swap Memory:' + item.swap_memory + '<br> Swap Free:' + item.swapfree_memory >> >> var time = new Date(parseInt(item.time)) >> >> data_array.push([{v: time.toString()}, {v: parseInt(item.cpu_usage)}]); >> >> }); >> >> drawCharts(data_array); >> >> $( "#computer_info" ).html(html_insert); >> >> $( "#computer_stats" ).html(stats); >> >> setTimeout(function(){ updateData(); }, 30000); >> >> } >> >> updateData(); >> >> >> >> function update_messages(){ >> >> var message_data = Cynergi.get(':3000/page_contact?order=time.asc'); >> >> var message_insert = ''; >> >> $.each( message_data, function( i, item ) { >> >> var time = new Date(parseInt(item.time)) >> >> message_insert = message_insert + '<p>From: ' +item.name+ >> '</p><p>Message: ' + item.message + '</p><p>Email: ' + item.email + >> '</p><p>Time: ' + time + '</p><button onclick="delete_post(' + item.id + >> ')">Delete</button>' >> >> }); >> >> $( "#messages" ).html(message_insert); >> >> setTimeout(function(){ update_messages(); }, 1000); >> >> } >> >> update_messages(); >> >> >> >> //this is how you insert into the db >> >> var d = new Date(); >> >> var time = d.getTime(); >> >> var post = {"name":"Grant Zukel","email":"Test Email","message":"Test >> Message","read":"no","username":"zukeru","time":time}; >> >> var json_data = post; >> >> Cynergi.insert('http://:3000/page_contact', json_data); >> >> >> >> //this is how you delete from the db >> >> function delete_post(id){ >> >> if (confirm('Are you sure you want to delete this post?')) { >> >> Cynergi.delete('http://.com:3000/page_contact?id=eq.' + id); >> >> } >> >> } >> >> >> >> //this is how you do an update to teh db >> >> var d = new Date(); >> >> var time = d.getTime(); >> >> var post = {"name":"Grant Zukel","email":"Test >> Email@fuckaroasdasd","message":"Test Message UPDATED","read":"no"," >> username":"zukeruasdasd","time":time}; >> >> var json_data = post; >> >> Cynergi.update('http://:3000/page_contact?id=eq.26', json_data); >> >> >> >> $( document ).ready(function() { >> >> $( "#computer_info" ).html(html_insert); >> >> $( "#computer_stats" ).html(stats); >> >> $( "#sentStatus" ).html(sentStatus); >> >> $( "#deleteStatus" ).html(deleteStatus); >> >> $( "#updateStatus" ).html(updateStatus); >> >> $( "#messages" ).html(message_insert); >> >> }); >> >> >> >> function drawCharts(data_array){ >> >> google.load('visualization', '1.1', {packages: ['line']}); >> >> google.setOnLoadCallback(drawChart); >> >> >> >> function drawChart() { >> >> var data = new google.visualization.DataTable(); >> >> data.addColumn('string', 'Time'); >> >> data.addColumn('number', 'CPU Usage'); >> >> >> >> data.addRows(data_array); >> >> >> >> var options = { >> >> chart: { >> >> title: "Playground's %% CPU Usage", >> >> subtitle: 'you know you likie.' >> >> }, >> >> width: 900, >> >> height: 500 >> >> }; >> >> var chart = new google.charts.Line(document. >> getElementById('chart')); >> >> console.log(chart); >> >> chart.draw(data, options); >> >> } >> >> } >> >> </script> >> >> </head> >> >> <body> >> >> <div id="chart"></div> >> >> <p style='text-align:left;align:left;' id='updateStatus'></p></p> >> >> <p style='text-align:left;align:left;' id='sentStatus'></p></p> >> >> <p style='text-align:left;align:left;' id='deleteStatus'></p></p> >> >> <p style='text-align:left;align:left;' id='computer_info'></p></p> >> >> <p style='text-align:left;align:left;' id='computer_stats'></p></p> >> >> <p style='text-align:left;align:left;' id='messages'></p></p> >> >> </body> >> >> </html> >> >> -- >> You received this message because you are subscribed to the Google Groups >> "Google Chart API" group. >> To unsubscribe from this group and stop receiving emails from it, send an >> email to [email protected] <javascript:>. >> To post to this group, send email to [email protected] >> <javascript:>. >> Visit this group at http://groups.google.com/group/google-chart-api. >> For more options, visit https://groups.google.com/d/optout. >> > -- You received this message because you are subscribed to the Google Groups "Google Chart 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-chart-api. For more options, visit https://groups.google.com/d/optout.
