Can you email me a link to your page where I can see this in action? On Tue, Apr 7, 2015 at 11:33 AM G Z <[email protected]> wrote:
> with your code the second graph works but it blinks and flashes as it > updates but the first one works normally. > > > On Tuesday, April 7, 2015 at 7:43:18 AM UTC-6, Sergey Grabkovsky wrote: > >> You changed your code again to call google.load multiple times. As I've >> said in my prior message, you should not do this. The block I wrote for you >> does the resource management for both charts and data. Please make an >> effort to understand it by reading the comments that I wrote. You should be >> able to add charts simply by modifying that block and adding to the >> drawChart function. >> >> I've attached the modified file. I haven't tested it (because I don't >> have access to your server/data, but I think it should work, save for some >> trivial JavaScript errors (which hopefully you can figure out on your own). >> >> On Tue, Apr 7, 2015 at 9:34 AM G Z <[email protected]> wrote: >> >> Hello Sergey I'm confused about how to add a secondary chart. Here is my >> attempt, but the secondary chart is not displaying. >> >> >> >> <!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 update_messages() { >> var message_data = Cynergi.get('http://.com: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://.com: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://.com: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 updateData(callback) { >> >> // 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 = [] >> >> var data_arrayMem = [] >> var net_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)) >> //time = time.getHours() + ':' + time.getMinutes() + ':' + >> time.getSeconds(); >> >> time = item.time; >> >> data_array.push([ >> { >> v: time.toString() >> }, >> { >> v: parseInt(item.cpu_usage) >> >> }, >> { >> v: parseInt((item.free_memory / item.total_memory)*100) >> }, >> { >> v: parseInt(item.net_devices.split("-")[0]) >> }, >> { >> v: parseInt(item.net_devices.split("-")[1]) >> } >> >> ]); >> >> net_array.push([ >> { >> v: time.toString() >> }, >> { >> v: parseInt(item.net_devices.split("-")[0]) >> }, >> { >> v: parseInt(item.net_devices.split("-")[1]) >> } >> >> ]); >> >> }); >> // After things have been loaded, call the callback. >> callback(data_array,net_array); >> >> >> $("#computer_info").html(html_insert); >> $("#computer_stats").html(stats); >> } >> >> // Wrap the data fetching and charts code in a function scope so that we >> can >> // store variables without putting them in the global scope. >> (function() { >> // The enclosing function will only be called once, therefore this >> google.load >> // will only be called once >> >> google.load('visualization', '1.1', { >> packages: ['line'] >> }); >> >> google.setOnLoadCallback(chartsLoaded); >> >> // Create something to keep track of the things we care about loading. >> // We effectively need to keep track of loading two things, and this is >> the most >> // straightforward way to do this. >> // We don't really have a guaranteed order in which things will load, so >> we need >> // to wait until both are loaded before we can draw a chart. >> var loadTracker = { >> charts: false, >> data: null >> }; >> >> // Renders a chart if both data and charts are available. >> function maybeRenderChart() { >> if (loadTracker.charts && loadTracker.data) { >> // Only draw the chart once both data and charts are available. >> drawChart(loadTracker.data) >> } >> } >> >> // Called when updateData returns. >> function dataLoaded(data_array) { >> // Once the data loads, set the data in the loadTracker and maybe >> render the >> // chart (if the charts have been loaded already as well). >> loadTracker.data = data_array; >> maybeRenderChart() >> } >> >> // Calls when google.load returns. >> function chartsLoaded() { >> // Mark charts as having loaded. This will only happen once. >> loadTracker.charts = true; >> // Then maybe draw the charts (if the da >> >> ... > > -- > 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. > -- 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.
