use json url data in a bar graph

Question

This is the json data stored in a URL(example : http://localhost/icx/test/link.html). this data is live and it changes with time

    [{
        "call_time": "0",
        "total_inc_traffic": "1363.10",
        "total_out_traffic": "88.70"
    }, {
        "call_time": "1",
        "total_inc_traffic": "479.57",
        "total_out_traffic": "36.98"
    }, {
        "call_time": "2",
        "total_inc_traffic": "239.57",
        "total_out_traffic": "13.43"
    }, {
        "call_time": "3",
        "total_inc_traffic": "190.28",
        "total_out_traffic": "8.20"
    }, {
        "call_time": "4",
        "total_inc_traffic": "223.80",
        "total_out_traffic": "0.00"
    }, {
        "call_time": "5",
        "total_inc_traffic": "158.87",
        "total_out_traffic": "19.58"
    }, {
        "call_time": "6",
        "total_inc_traffic": "27.52",
        "total_out_traffic": "36.18"
    }, {
        "call_time": "7",
        "total_inc_traffic": "47.70",
        "total_out_traffic": "69.57"
    }, {
        "call_time": "8",
        "total_inc_traffic": "2234.35",
        "total_out_traffic": "137.60"
    }, {
        "call_time": "9",
        "total_inc_traffic": "150.67",
        "total_out_traffic": "162.07"
    }, {
        "call_time": "10",
        "total_inc_traffic": "4497.05",
        "total_out_traffic": "267.32"
    }, {
        "call_time": "11",
        "total_inc_traffic": "5049.87",
        "total_out_traffic": "242.42"
    }, {
        "call_time": "12",
        "total_inc_traffic": "5227.67",
        "total_out_traffic": "286.88"
    }, {
        "call_time": "13",
        "total_inc_traffic": "3384.30",
        "total_out_traffic": "360.88"
    }, {
        "call_time": "14",
        "total_inc_traffic": "3650.73",
        "total_out_traffic": "328.28"
    }]

The bar-graph javascript code is given below. The above url data is needed to be used in this graph

    <script>
    var options = {
      chart: {
        height: 255,
        type: "bar"
      },
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: "55%",
          endingShape: "rounded"
        }
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        show: true,
        width: 0.5,
        colors: ["transparent"]
      },
      series: [
        {
          name: "Traffic In",
          data: [
            44,
            55,
            57,
            56,
            61,
            58,
            63,
            61,
            66,
            21,
            44,
            55,
            57,
            56,
            61,
            58,
            63,
            61,
            66,
            21,
            33,
            22,
            11,
            55
          ]
        },
        {
          name: "Traffic Out",
          data: [
            76,
            85,
            111,
            98,
            87,
            115,
            91,
            114,
            94,
            76,
            85,
            111,
            98,
            87,
            115,
            91,
            114,
            94,
            76,
            85,
            111,
            77,
            98,
            87
          ]
        }
      ],
      xaxis: {
        categories: [
          "1",
          "",
          "3",
          "",
          "5",
          "",
          "7",
          "",
          "9",
          "",
          "11",
          "",
          "13",
          "",
          "15",
          "",
          "17",
          "",
          "19",
          "",
          "21",
          "",
          "23",
          ""
        ]
      },
      yaxis: {},
      fill: {
        opacity: 1
      },
      tooltip: {
        y: {
          formatter: function(val) {
            return " " + val + " Calls";
          }
        }
      }
    };

    var chart = new ApexCharts(document.querySelector("#HT_IGW"), options);

    chart.render();
    </script>

How can I use this URL (example : http://localhost/icx/test/link.html) in my javascript bar graph code? Please help if anyone have any idea

how can i use the json data in this bar graph?? please help – Tanvir Nabil Jun 20 '19 at 03:28 — Tanvir Nabil, Jun 20 '19 at 03:28

score 1 · Answer 1 · edited Jun 20 '19 at 05:12

When you say "json data stored in a URL" do you mean like this?

http://localhost/icx/test/link.html?data=example_data

This is called GET data. If you are storing all that given data in the URL that is a bit of a bad idea since URLs do have a limit to their length (usually 2048 characters).

As for displaying the bar chart, a plugin like canvasJS would help you out nicely, there is a code example right on the front page.

score 0 · Answer 2 · answered Jun 20 '19 at 04:45

0

You should use AJAX and jQuery to get data from Link like below:

$(document).ready(function () {
var output=[];
  $.ajax('path of your link', 
  {
    dataType: 'json', // type of response data
    timeout: 500,     // timeout milliseconds
    success: function (data,status,xhr) {   // success callback function
        console.log(data);
        output=data;
        /** Here you have to separate data received from link into 3 different array variables which then you can use in chart code where right now you have static array. **/
    },
    error: function (jqXhr, textStatus, errorMessage) { // error callback 
        console.log('Error: ' + errorMessage);
    }
  });
});

answered Jun 20 '19 at 04:45

Khushbu

655
7
17

how to seperate the data received from link into 3 different array? – Tanvir Nabil Jun 20 '19 at 04:59
you can iterate through the data and push properties from object in loop in separate arrays – Khushbu Jun 20 '19 at 05:11
you may check this article: https://stackoverflow.com/questions/16626735/how-to-loop-through-an-array-containing-objects-and-access-their-properties – Khushbu Jun 20 '19 at 05:12

use json url data in a bar graph

2 Answers2