PHP MySQL Charts/Graphs - Teh Forum

<body> <div id="header"> <span class="left"> <span class="back"><a href="lthread_list.php?webtag=DEFAULT"><span class="image mobile_back" title="Back"></span></a></span> <span class="image mobile_logo" title="Beehive Forum Logo"></span> </span> <ul> <li> <a class="reply_all" href="lpost.php?webtag=DEFAULT&reply_to=40466.0&return_msg=40466.30"> <span class="image mobile_reply_all"></span><span class="text">Reply to All</span> </a> </li> <li> <a class="navigation" href="#"> <span class="image mobile_navigation"></span><span class="text">Show messages</span> </a> </li> <li> <a class="main" href="#"><span class="image mobile_menu" title="Menu"></span> </a> </li> </ul> </div> <div class="menu main"> <ul> <li><a href="lthread_list.php?webtag=DEFAULT">Messages</a></li> <li><a href="lpm.php?webtag=DEFAULT">Inbox</a></li> <li><a href="lsearch.php?webtag=DEFAULT">Search</a></li> <li><a href="llogon.php?webtag=DEFAULT">Login</a></li> </ul> </div> <div class="menu navigation"><a href="lmessages.php?webtag=DEFAULT&msg=40466.1">1–10</a><a href="lmessages.php?webtag=DEFAULT&msg=40466.11">11–20</a><a href="lmessages.php?webtag=DEFAULT&msg=40466.21">21–30</a><a href="lmessages.php?webtag=DEFAULT&msg=40466.31">31–40</a><a href="lmessages.php?webtag=DEFAULT&msg=40466.41">41–47</a></div> <div id="page_content"> <h3 class="thread_title"><a href="index.php?webtag=DEFAULT&amp;msg=40466.30">PHP MySQL Charts/Graphs</a> </h3> <div id="messages" data-navigation="40466_30_47_10"> <a name="a40466_30"></a><div class="message" id="message_40466_30"> <div class="message_header"> <div class="message_from"> From: Ken (SHIELDSIT)<span class="message_time"> 6 May 2013 21:13</span> <div class="clearer"></div> </div><div class="message_to">To: ANT_THOMAS <span><span class="image post_read" title="Read: 6 May 2013 21:14"></span></span> <span class="message_count">30 of 47</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=40466.30">40466.30</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=40466.28">40466.28</a></div> <div class="message_body"> Soon you will be able to tell us all that it has been the hottest day in the history of hot!</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=40466.30&return_msg=40466.30" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="40466.30"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a40466_31"></a><div class="message" id="message_40466_31"> <div class="message_header"> <div class="message_from"> From: af (CAER)<span class="message_time"> 6 May 2013 21:15</span> <div class="clearer"></div> </div><div class="message_to">To: ANT_THOMAS <span><span class="image post_read" title="Read: 6 May 2013 21:20"></span></span> <span class="message_count">31 of 47</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=40466.31">40466.31</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=40466.23">40466.23</a></div> <div class="message_body"> FWIW: <a href="http://caer.me:2988/server.js">http://caer.me:2988/server.js</a><br /><br /> That's the source to the Node app that's serving the monitoring page.<br /><br /> Also, in the time between writing the above paragraph and starting to write this one, I rewrote a big chunk of both the monitoring, server and client-side code. The monitoring code now stores counts etc. in the database (previously it appended to a log file), while the server code now sends the data in a nicer format. The client code has been updated to take that into account, and is now simpler as a result.<br /><br /> Oh and <a href="http://redis.io/">Redis</a> is cool, you should try it. Much more lightweight and straightforward than *SQL.<br /><br /> edit:<br /><br /> oops, just noticed my MIME type thing is a bit stupid.<br /><br /> edit 2:<br /><br /> How come you're not requesting the graph data via AJAX? Seems a simpler way to do it, imo, and less for your server to do.<br /><div class="edit_text">EDITED: 6 May 2013 21:22 by CAER</div> </div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=40466.31&return_msg=40466.30" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="40466.31"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a40466_32"></a><div class="message" id="message_40466_32"> <div class="message_header"> <div class="message_from"> From: ANT_THOMAS<span class="message_time"> 6 May 2013 21:28</span> <div class="clearer"></div> </div><div class="message_to">To: af (CAER) <span><span class="image post_read" title="Read: 6 May 2013 22:12"></span></span> <span class="message_count">32 of 47</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=40466.32">40466.32</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=40466.30#a40466_31" target="_self">40466.31</a></div> <div class="message_body"> AJAX...because I don't know how to. I've never knowingly used any AJAX code in anything I've made. Basically all I tend to do when I make something online is tack together the bits of things I already know and I've already made else where and then learn a little bit more to get whatever I want working sufficiently <span class="emoticon e_embarrassed" title=":$"><span class="e__">:$</span></span></div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=40466.32&return_msg=40466.30" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="40466.32"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a40466_33"></a><div class="message" id="message_40466_33"> <div class="message_header"> <div class="message_from"> From: af (CAER)<span class="message_time"> 6 May 2013 22:36</span> <div class="clearer"></div> </div><div class="message_to">To: ANT_THOMAS <span><span class="image post_read" title="Read: 6 May 2013 22:51"></span></span> <span class="message_count">33 of 47</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=40466.33">40466.33</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=40466.30#a40466_32" target="_self">40466.32</a></div> <div class="message_body"> <p> It's really simple. First you make a PHP thing to serve the data:</p> <pre> <?php // this is get_data.php $time = $_GET['time']; $dataset1 = magic_function_to_fetch_outdoors_data_from_db($time); $dataset2 = magic_function_to_fetch_inoors_data_from_db($time); $data = array( "dataset1" => $dataset1, "dataset2" => $dataset2 ); echo json_encode($data); ?></pre> <p> Then you modify your HTML links like so:</p> <pre> <ul id="period"> <li><a href="get_data.php?time=1h">1 hour</a></li> <li><a href="get_data.php?time=2h">2 hour</a></li> <li><a href="get_data.php?time=6h">6 hour</a></li> </ul></pre> <p> Then you have some JS that looks something like this:</p> <pre> var $chart = $("#placeholder"), options = { lines: { show: true }, points: { show: false } // etc. }; function plotChart(data) { $.plot($chart, [ { data: data.dataset2, color: "#DE1B55", label: "Indoors" }, { data: data.dataset1, color: "#5F2BCF", label: "Outdoors" } ], options); } $("#period").on("click", "a", function () { var $link = $(this); $link.addClass("working"); $.ajax({ url: this.href, type: "GET", dataType: "json" }).done(function (data) { plotChart(data); }).fail(function () { alert("O noes!"); }).always(function () { $link.removeClass("working"); }); return false; // stops the browser from trying to follow the link });</pre> <p> And that's basically it.</p> <div class="edit_text">EDITED: 6 May 2013 22:50 by CAER</div> </div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=40466.33&return_msg=40466.30" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="40466.33"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a40466_34"></a><div class="message" id="message_40466_34"> <div class="message_header"> <div class="message_from"> From: Drew (X3N0PH0N)<span class="message_time"> 8 May 2013 08:58</span> <div class="clearer"></div> </div><div class="message_to">To: ALL<span class="message_count">34 of 47</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=40466.34">40466.34</a></div> <div class="message_body"> Not really directly relevant but I saw this today, seems pretty coool: <a href="https://plot.ly/plot">https://plot.ly/plot</a></div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=40466.34&return_msg=40466.30" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="40466.34"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a40466_35"></a><div class="message" id="message_40466_35"> <div class="message_header"> <div class="message_from"> From: CHYRON (DSMITHHFX)<span class="message_time"> 8 May 2013 09:54</span> <div class="clearer"></div> </div><div class="message_to">To: ANT_THOMAS <span><span class="image post_read" title="Read: 8 May 2013 10:20"></span></span> <span class="message_count">35 of 47</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=40466.35">40466.35</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=40466.16">40466.16</a></div> <div class="message_body"> Might you not speed it up with fewer samples? Every minute seems excessive (maybe you needed that for developing/debugging).</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=40466.35&return_msg=40466.30" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="40466.35"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a40466_36"></a><div class="message" id="message_40466_36"> <div class="message_header"> <div class="message_from"> From: CHYRON (DSMITHHFX)<span class="message_time"> 8 May 2013 09:57</span> <div class="clearer"></div> </div><div class="message_to">To: Drew (X3N0PH0N) <span><span class="image post_read" title="Read: 8 May 2013 10:19"></span></span> <span class="message_count">36 of 47</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=40466.36">40466.36</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=40466.30#a40466_34" target="_self">40466.34</a></div> <div class="message_body"> That choked my dual core 2.5g.</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=40466.36&return_msg=40466.30" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="40466.36"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a40466_37"></a><div class="message" id="message_40466_37"> <div class="message_header"> <div class="message_from"> From: ANT_THOMAS<span class="message_time"> 8 May 2013 10:29</span> <div class="clearer"></div> </div><div class="message_to">To: CHYRON (DSMITHHFX) <span><span class="image post_read" title="Read: 8 May 2013 12:26"></span></span> <span class="message_count">37 of 47</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=40466.37">40466.37</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=40466.30#a40466_35" target="_self">40466.35</a></div> <div class="message_body"> There isn't really any developing/debugging as such. I've been playing with temperature sensors with my RPis and I wanted to put one outdoors and I decided it would be nice to look at the data in a graph. Every minutes is definitely overkill but it's very quick when I access the data locally, I think it would be slow even if the data was held on the hosting server, especially when it gets to weeks and months worth of data.</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=40466.37&return_msg=40466.30" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="40466.37"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a40466_38"></a><div class="message" id="message_40466_38"> <div class="message_header"> <div class="message_from"> From: af (CAER)<span class="message_time"> 8 May 2013 18:22</span> <div class="clearer"></div> </div><div class="message_to">To: CHYRON (DSMITHHFX) <span><span class="image post_read" title="Read: 8 May 2013 19:35"></span></span> <span class="message_count">38 of 47</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=40466.38">40466.38</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=40466.30#a40466_35" target="_self">40466.35</a></div> <div class="message_body"> At that rate, 24 hours' worth is only 60k or so – 1440 data points per series, which is not a huge amount, and like I said earlier, even my phone can handle that with no noticeable slowing.</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=40466.38&return_msg=40466.30" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="40466.38"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a40466_39"></a><div class="message" id="message_40466_39"> <div class="message_header"> <div class="message_from"> From: koswix<span class="message_time"> 8 May 2013 22:29</span> <div class="clearer"></div> </div><div class="message_to">To: Drew (X3N0PH0N) <span><span class="image post_read" title="Read: 9 May 2013 03:05"></span></span> <span class="message_count">39 of 47</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=40466.39">40466.39</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=40466.30#a40466_34" target="_self">40466.34</a></div> <div class="message_body"> No drop shadow! <span class="emoticon e_shock" title=":O"><span class="e__">:O</span></span></div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=40466.39&return_msg=40466.30" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="40466.39"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div></div> <div class="message_page_footer"> <ul> <li class="right_col"><form accept-charset="utf-8" method="get" action="lmessages.php" target="_self"><input type="hidden" name="webtag" id="webtag" class="bhinputtext" value="DEFAULT" dir="ltr" /><input type="hidden" name="msg" id="msg" class="bhinputtext" value="40466.40" dir="ltr" /><input type="submit" name="submit" id="keep_reading" value="Keep reading…" class="button" /></form></li> </ul> </div> </div> </body>