{"id":250,"date":"2016-02-20T16:47:48","date_gmt":"2016-02-20T16:47:48","guid":{"rendered":"https:\/\/www.kolkataonweb.com\/code-bank\/?p=250"},"modified":"2016-07-18T21:36:12","modified_gmt":"2016-07-18T20:36:12","slug":"realtime-charts-graphs","status":"publish","type":"post","link":"https:\/\/www.kolkataonweb.com\/code-bank\/php\/realtime-charts-graphs\/","title":{"rendered":"Realtime Charts \/ Graphs"},"content":{"rendered":"

CanvasJS<\/a>\u00a0 provides a very developer friendly chat or graph library. The library is based on HTML 5 and JS. And can also be used for displaying realtime charts or graphs also.<\/p>\n

There are various types of charts\/graphs available.<\/p>\n

Below are some useful codes<\/p>\n

Frontend code:<\/h6>\n
\n
<?php\r\n$conn = mysql_connect(\"localhost\",\"xxxxxxxxx\",\"xxxxxxxxx\");\r\nif(!$conn)\r\n{\r\n\u00a0\u00a0 \u00a0echo \"Error: failed to connect DB Server\";\r\n\u00a0\u00a0 \u00a0die();\r\n}\r\n\r\nif(!mysql_select_db(\"xxxxxxxxx\",$conn))\r\n{\r\n\u00a0\u00a0 \u00a0echo \"Error: failed to connect DB\";\r\n\u00a0\u00a0 \u00a0die();\r\n}\r\n\r\n$jsonArray1 = array();\r\n$i=0;\r\n$result = mysql_query(\"select * from weather_log\");\r\nwhile($rows = mysql_fetch_array($result))\r\n{\r\n\u00a0\u00a0 \u00a0$jsonArray1[$i] = array(date(\"Y,m,d,H,i\",$rows['timestamp']), floatval($rows['temperature']));\r\n}\r\n?>\r\n<html>\r\n\u00a0 <head>\r\n\u00a0 <script type=\"text\/javascript\" src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.10.2\/jquery.min.js\"><\/script>\r\n\u00a0 <script type=\"text\/javascript\">\r\n\u00a0 \u00a0\u00a0 \u00a0var chart;\r\n\u00a0\u00a0 \u00a0\u00a0 window.onload = function () {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 chart = new CanvasJS.Chart(\"chartContainer\",\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 title:{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 text: \"Temperature\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 },\r\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 data: [\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 type: \"line\",\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 dataPoints: [\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <?php\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0for($j=0;$j<$i;$j++)\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ?>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0{ x: new Date(<?php echo $jsonArray1[$j][0] ?>), y: <?php echo $jsonArray1[$j][1] ?> } <?php echo $j<$i-1?\",\" :\"\" ?>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 <?php \u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ?>\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ]\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ]\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 chart.render();\r\n\u00a0\u00a0 \u00a0\u00a0 }\r\n\u00a0\u00a0 \u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0function updateTemp() \r\n\u00a0\u00a0 \u00a0{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var str = JSON.parse(updateData(\"t\"));\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var date = str[1].split(\",\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0chart.options.data[0].dataPoints.push({x : new Date(date[0],date[1],date[2],date[3],date[4]),\u00a0 y : parseFloat(str[0]) });\r\n\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0chart.render(); \u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0};\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0function updateData(type)\r\n\u00a0\u00a0 \u00a0{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var xmlhttp = new XMLHttpRequest();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 xmlhttp.open(\"GET\", \"dataPlotter.php?q=\" + type, false);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 xmlhttp.send();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return xmlhttp.responseText;\r\n\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0setInterval(\"updateTemp()\",360000);\u00a0\u00a0 \u00a0\r\n\u00a0 <\/script>\r\n\u00a0 <\/head>\r\n\r\n\u00a0 <body>\r\n\r\n\u00a0\u00a0\u00a0 <!--Div that will hold the chart-->\r\n\u00a0\u00a0\u00a0 <div id=\"chartContainer\" style=\"height: 300px; width: 100%;\"><\/div>\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0<script src=\"canvasjs.min.js\"><\/script>\r\n\u00a0\u00a0 \u00a0<script src=\"jquery.canvasjs.min.js\"><\/script>\r\n\u00a0\u00a0 \u00a0\r\n\u00a0 <\/body>\r\n<\/html><\/span><\/pre>\n<\/blockquote>\n
Backend code (dataPlotter.php in above snippet)<\/h6>\n
\n
$result = mysql_query(\"select temperature,timestamp from weather_log order by timestamp desc limit 0,1\");\r\n$rows = mysql_fetch_array($result);\r\n\r\nheader('Content-Type: application\/json');\r\necho json_encode(array($rows['temperature'],date(\"Y,m,d,H,i\",$rows['timestamp'])));<\/span><\/pre>\n<\/blockquote>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
CanvasJS\u00a0 provides a very developer friendly chat or graph library. The library is based on HTML 5 and JS. And can also be used for displaying realtime charts or graphs also. There are various types of charts\/graphs available. Below are some useful codes Frontend code: <?php $conn = mysql_connect(“localhost”,”xxxxxxxxx”,”xxxxxxxxx”); if(!$conn) { \u00a0\u00a0 \u00a0echo “Error: failed… Continue reading Realtime Charts \/ Graphs<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-250","post","type-post","status-publish","format-standard","hentry","category-php","entry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/posts\/250","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/comments?post=250"}],"version-history":[{"count":3,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/posts\/250\/revisions"}],"predecessor-version":[{"id":454,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/posts\/250\/revisions\/454"}],"wp:attachment":[{"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/media?parent=250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/categories?post=250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/tags?post=250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}