CanvasJS Multiple Guage from JSON Data
Some codes with CanvasJS, jQuery and JSON Data
by kidino
HTML
<script src="//canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="//cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.4/radial/gauge.min.js"></script>
<div id="meter-area"></div>
CSS
body {
background: #fcfcfc;
padding: 20px;
font-family: Helvetica;
}
#meter-area {
text-align: center;
}
JavaScript
var data = [{
"id": "1271907",
"time": "12:07:26PM",
"meter": "1",
"voltage": "234.20",
"current": "0.00",
"power": "12340.00",
"pf": "1.00",
"frequency": "50.00",
"energy": "455.705"
},
{
"id": "1271907",
"time": "12:08:01PM",
"meter": "2",
"voltage": "233.98",
"current": "0.00",
"power": "0.00",
"pf": "1.00",
"frequency": "50.00",
"energy": "0.000"
},
{
"id": "1271907",
"time": "12:08:02PM",
"meter": "3",
"voltage": "233.75",
"current": "0.03",
"power": "0.00",
"pf": "1.00",
"frequency": "50.00",
"energy": "183.144"
},
{
"id": "1271907",
"time": "12:08:04PM",
"meter": "4",
"voltage": "234.86",
"current": "0.00",
"power": "0.00",
"pf": "1.00",
"frequency": "50.00",
"energy": "255.742"
},
{
"id": "1271907",
"time": "12:07:49PM",
"meter": "5",
"voltage": "234.34",
"current": "0.00",
"power": "0.00",
"pf": "1.00",
"frequency": "50.05",
"energy": "0.003"
},
{
"id": "1271907",
"time": "12:06:27PM",
"meter": "6",
"voltage": "233.92",
"current": "0.00",
"power": "0.00",
"pf": "1.00",
"frequency": "50.05",
"energy": "227.325"
},
{
"id": "1271907",
"time": "12:07:35PM",
"meter": "7",
"voltage": "235.11",
"current": "0.00",
"power": "0.00",
"pf": "1.00",
"frequency": "50.00",
"energy": "155.466"
},
{
"id": "1271907",
"time": "12:05:24PM",
"meter": "8",
"voltage": "234.35",
"current": "0.00",
"power": "0.00",
"pf": "1.00",
"frequency": "50.05",
"energy": "457.659"
},
{
"id": "1271907",
"time": "12:04:36PM",
"meter": "9",
"voltage": "234.18",
"current": "0.02",
"power": "0.00",
"pf": "1.00",
"frequency": "50.05",
"energy": "542.628"
},
{
"id": "1271907",
"time": "12:07:39PM",
"meter": "10",
"voltage":...