CODEWITHSUNDEEP
ajaxhtmlgraph
Johnrad
Johnrad

Reputation: 2655

Interactive Graph Implementation

I am currently trying to implement a graph on a website from a raw set of data stored in an excel file. I am just at a loss of how to start an implementation of this.

I do know that I will have to use HTML5 and AJAX most likely to make the graph interactive. But that is as far as my knowledge goes. I have experience using AJAX and HTML, but I have never used HTML5. So I am pretty unfamiliar with the canvas tag.

In my research I have come across a few tools such as http://www.rgraph.net/, to make implementation easier. However, this is for personal use only and cannot be used commercially for free. So I am forced to come up with this on my own.

Can anyone give me a good idea where to start and or point me in the direction of some tutorials to get the ball rolling.

Thanks.

Upvotes: 2

Views: 468

Answers (1)

Beau Bouchard
Beau Bouchard

Reputation: 827

As far as interactive charts go, I prefer to use google charts

Here is an Demo of how it would work:

 <html>
 <head>
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);

      function drawChart() {
      var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

    var options = {
      title: 'My Daily Activities'
    };

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>
  </head>


  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Would come out looking like this: Chart demo

Excel can export the data as a CSV, or XML file which I know you can integrate into google charts easily with little coding experience using AJAX calls.

Edit: Also if you post more details about your data, perhaps an example, I can provide some more help.

Upvotes: 1

Related Questions