0

Basically i am creating an app which tracks the location of devices. And i have a HTML Table which shows the details.

-------   --------   -------   -----------    -------
 slno      device     type      location       time
-------   --------   -------   -----------    --------
  1        iphone     apple     cafeteria      10/3/15 10am
  2        s5         samsung   1st floor      10/3/15 10.12am
  3        OneX       HTC       2nd floor      10/3/15 10am
  4        iphone     apple     cafeteria      10/3/15 10.01am
  .         ..         ..         ..                ..

My data is dynamic and more(I might have 200 entries in my table for 5 minutes) and I am looking for a dyanamic graphical chart plugins from php or from jquery which exactly put my data into chart views.

I have been looking at Highcharts and arbor.js. and couldn't implement arbor.js for my dynamic data.

I need suggestions, links that, how do i approach my table data to generate my graphical chart?

Matarishvan
  • 2,382
  • 3
  • 38
  • 68
  • 1
    you should probably see this link http://stackoverflow.com/questions/7034/graph-visualization-library-in-javascript – Arun Mar 10 '15 at 06:54
  • Highcharts lib has [tutorial](http://www.highcharts.com/docs/working-with-data/data-intro) for working with data. – Paweł Fus Mar 11 '15 at 16:42

1 Answers1

1

i think chart.js will help you. try it

this is a simple to dynamic update chart from https://gist.github.com/skhisma/5689383

Demo for it

<!DOCTYPE html>
<html>
<head>
<title>Chart.js Redraw Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js
"></script>
<script type="text/javascript" charset="utf-8">
window.chartOptions = {
segmentShowStroke: false,
percentageInnerCutout: 75,
animation: false
};
var chartUpdate = function(value) {
console.log("Updating Chart: ", value);
// Replace the chart canvas element
$('#chart').replaceWith('<canvas id="chart" width="300" height="300"></canvas>');
// Draw the chart
var ctx = $('#chart').get(0).getContext("2d");
new Chart(ctx).Doughnut([
{ value: value,
color: '#4FD134' },
{ value: 100-value,
color: '#DDDDDD' }],
window.chartOptions);
// Schedule next chart update tick
setTimeout (function() { chartUpdate(value - 1); }, 1000);
}
$(document).ready(function() {
setTimeout (function() { chartUpdate(99); }, 1000);
})
</script>
</head>
<body>
<canvas id="chart" width="300" height="300"></canvas>
</body>
Omar Sedki
  • 608
  • 6
  • 14