> > 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 data has loaded already). maybeRenderChart(); } // Call the first updateData, and call dataLoaded with it when done. updateData(dataLoaded); function drawChart(data_array) { var data = new google.visualization.DataTable(); data.addColumn('string', 'Time'); data.addColumn('number', 'CPU Usage'); data.addColumn('number', 'Mem Usage'); data.addColumn('number', 'Net TX'); data.addColumn('number', 'NET Rcv'); data.addRows(data_array); var options = { chart: { title: "Playground's Metrics", subtitle: 'you know you likie.' }, width: 900, height: 500 }; var chart = new google.charts.Line(document.getElementById('chart')); chart.draw(data, options); // Update the data and then draw the chart in 3 seconds. setTimeout(function() { updateData(drawChart); }, 1000) } })(); //second chart (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. drawChartnet(loadTracker.data) } } // Called when updateData returns. function dataLoaded(net_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 = net_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 data has loaded already). maybeRenderChart(); } // Call the first updateData, and call dataLoaded with it when done. updateData(dataLoaded); function drawChartnet(net_array) { console.log(net_array); var data = new google.visualization.DataTable(); data.addColumn('string', 'Time'); data.addColumn('number', 'Net TX'); data.addColumn('number', 'NET Rcv'); data.addRows(net_array); var options = { chart: { title: "Playground's Net Usage", subtitle: 'you know you likie.' }, width: 900, height: 500 }; var chart = new google.charts.Line(document.getElementById('chartNet')); chart.draw(data, options); // Update the data and then draw the chart in 3 seconds. setTimeout(function() { updateData(drawChartnet); }, 1000) } })() </script> </head> <body> <div id="chart"></div> <div id="chartNet"></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]. 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.
