Govind
Govind

Reputation: 87

Using Jquery and JqPlot to plot graph from JSON file with data

I have a .json file (abc.json) and I want to plot graph using jqplot from two columns of this data. My approach is:

  1. Converting json file data into array using jquery
  2. Plotting graph from that array using jqplot
  3. Then showing that graph on browser using html
  4. However I am not able to do so as I am not very proficient in javascript.

My JSON data looks like follows:

[
  {
    "id":1,
    "essid":"\"WiredSSID\"",
    "mac":"08:00:27:b1:3e:4d",
    "ip":"10.0.3.15",
    "ss":-55,
    "lon":-18.5333,
    "lat":65.9667,
    "alt":15.044444,
    "acc":1,
    "res":18058,
    "pub_date":"2015-12-01 22:39:07.700953"
  },
  {
    "id":2,
    "essid":"\"WiredSSID\"",
    "mac":"08:00:27:b1:3e:4d",
    "ip":"10.0.3.15",
    "ss":-55,
    "lon":-18.5333,
    "lat":65.9667,
    "alt":15.044444,
    "acc":1,
    "res":16337,
    "pub_date":"2015-12-01 23:13:52.639206"
  },

However I want my javascript to read the data directly from JSON file and plot the graph for id vs res.

Below is a an incomplete code which I have written for this purpose which is missing some major process.

Can anyone please help me completing this code so that I can complete this academic project of mine. this would be really helpful.

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />


<script src="jqplot.canvasTextRenderer.min.js" type="text/javascript"></script>
<script src="jqplot.canvasAxisLabelRenderer.min.js" type="text/javascript"></script>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="jquery.jqplot.js" type="text/javascript"></script>
<script src="jqplot.dateAxisRenderer.js" type="text/javascript"></script>
<script src="jqplot.categoryAxisRenderer.js" type="text/javascript" ></script>
<script src="jqplot.ohlcRenderer.js" type="text/javascript"></script>
<script src="jqplot.highlighter.js" type="text/javascript"></script>
<script src="jqplot.cursor.js" type="text/javascript"></script>
<script src="jqplot.pointLabels.min.js"  type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        // The url for our json data
        var url = 'mc_measurementne_new1.json';

        var ret = null;
        $.ajax({
            // have to use synchronous here, else the function 
            // will return before the data is fetched
            async: false,
            url: url,
            dataType: "json",
            success: function (data) {
                ret = data;
            }
        });

        var ID = [];
        var Delay = [];

        for (i = 0; i < ret.length; i++) {
            // Save the data to the relevant array. Note how date at the zeroth position (i.e. x-axis) is common for both demand and supply arrays.
            ID.push([ret[i].Date, ret[i].id]);
            Delay.push([ret[i].Date, ret[i].res]);
        }

        var plot1 = $.jqplot('chart1', [ID, Delay], {
            title: "Delay",
            axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickOptions: {
                        formatString: '%d/%m/%Y'
                    },

                    label: 'Date'
                },
                yaxis: {
                    label: 'Delay'
                },
                y2axis: {
                    label: 'ID'
                }
            },
            series: [
                { yaxis: 'yaxis', label: 'ID' },
                { yaxis: 'y2axis', label: 'Delay' }
            ],
            highlighter: {
                show: true,
                sizeAdjust: 1
            },
            cursor: {
                show: false
            }
        });
    });
</script>

@{
    ViewBag.Title = "jQPlot Demo";
}

<h2>@ViewBag.Title</h2>
<div id="chart1" style="height: 400px; width: 600px;"></div>




<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="jqplot.dateAxisRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.canvasTextRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.canvasAxisLabelRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.dateAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.categoryAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.ohlcRenderer.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.highlighter.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.cursor.js"></script>

</body>
</html>

Upvotes: 2

Views: 1043

Answers (1)

Fraser Crosbie
Fraser Crosbie

Reputation: 1762

Here is a working example. https://jsfiddle.net/9jk0jyvt/1/

I commented out the ajax request and replaced it with the json response you have provided above.

One thing to note is that you had the incorrect key for date. I switched it to pub_date.

I also swapped your axis labels to be correct.

$(document).ready(function() {
// The url for our json data
var url = 'mc_measurementne_new1.json';

data = [{
  "id": 1,
  "essid": "\"WiredSSID\"",
  "mac": "08:00:27:b1:3e:4d",
  "ip": "10.0.3.15",
  "ss": -55,
  "lon": -18.5333,
  "lat": 65.9667,
  "alt": 15.044444,
  "acc": 1,
  "res": 18058,
  "pub_date": "2015-12-01 22:39:07.700953"
}, {
  "id": 2,
  "essid": "\"WiredSSID\"",
  "mac": "08:00:27:b1:3e:4d",
  "ip": "10.0.3.15",
  "ss": -55,
  "lon": -18.5333,
  "lat": 65.9667,
  "alt": 15.044444,
  "acc": 1,
  "res": 16337,
  "pub_date": "2015-12-01 23:13:52.639206"
}];
populateGraph(data);
/*
$.ajax({
  url: url,
  dataType: "json",
  success: function (data) {
    populateGraph(data);
  }
});
*/

function populateGraph(ret) {
  var ID = [];
  var Delay = [];

  for (i = 0; i < ret.length; i++) {
    // Save the data to the relevant array. Note how date at the zeroth  position (i.e. x-axis) is common for both demand and supply arrays.
    ID.push([ret[i].pub_date, ret[i].id]);
    Delay.push([ret[i].pub_date, ret[i].res]);
  }

  var plot1 = $.jqplot('chart1', [ID, Delay], {
    title: "Delay",
    axes: {
      xaxis: {
        renderer: $.jqplot.DateAxisRenderer,
        tickOptions: {
          formatString: '%d/%m/%Y'
        },
        label: 'Date'
      },
      yaxis: {
        label: 'Delay'
      },
      y2axis: {
        label: 'ID'
      }
    },
    series: [{
        yaxis: 'yaxis',
        label: 'ID'
      }, {
        yaxis: 'y2axis',
        label: 'Delay'
    }],
    highlighter: {
      show: true,
      sizeAdjust: 1
    },
    cursor: {
      show: false
    }
  });
};
});

Upvotes: 1

Related Questions