使用Jquery和JqPlot从JSON文件中绘制带有数据的图形

时间：2022-09-15 08:55:59

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

我有一个。json文件(abc.json)，我想从数据的两列中使用jqplot绘图。我的方法是:

  1. Converting json file data into array using jquery
  2. 使用jquery将json文件数据转换为数组
  3. Plotting graph from that array using jqplot
  4. 使用jqplot从该数组绘制图形
  5. Then showing that graph on browser using html
  6. 然后用html在浏览器上显示图形
  7. However I am not able to do so as I am not very proficient in javascript.
  8. 但是我不能这么做，因为我不太精通javascript。

My JSON data looks like follows:

我的JSON数据如下:

[
  {
    "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.

但是，我希望javascript直接从JSON文件中读取数据，并绘制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>

1 个解决方案

#1

1  

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

这里有一个工作示例。https://jsfiddle.net/9jk0jyvt/1/

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

我注释掉了ajax请求，并用上面提供的json响应替换它。

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

需要注意的是，您的日期键不正确。我把它改成了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
    }
  });
};
});

#1

1  

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

这里有一个工作示例。https://jsfiddle.net/9jk0jyvt/1/

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

我注释掉了ajax请求，并用上面提供的json响应替换它。

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

需要注意的是，您的日期键不正确。我把它改成了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
    }
  });
};
});
标签：

相关文章