Will chart that reads embedded JSON also read JSON file?

Question

Generally speaking, will a chart that reads embedded JSON also read a JSON file?

For example, my current chart looks like this:

anychart.onDocumentReady(function() {
  chart = anychart.fromJson({
    chart: {
      type: "line",
      series: [{
        seriesType: "spline",
        data: [{
          x: "January",
          value: 10000
        }, {
          x: "February",
          value: 12000
        }, {
          x: "March",
          value: 18000
        }]
      }],
      container: "container"
    }
  }).draw();
});

<script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
<div id="container"></div>

<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css">

Now, instead of the JSON being embedded, it's in a file called myData.json. Will that chart read the JSON file? Or does that depend on the chart?

No. Two are different thing, obviously if its design like that in the plugin it can.. But I do not think so.. You need json data to populate that chart — A Paul, May 19 '17 at 21:04
The chart will always have json. What I'm asking is if it would be a difficult transition to change from embedded json to a json file. — fdkgfosfskjdlsjdlkfsf, May 19 '17 at 21:16
@Mike McCaughan: It seems you're a javascript expert. Would you know the answer to this? — fdkgfosfskjdlsjdlkfsf, May 19 '17 at 21:17
First of all, JSON is just a string format. That chart's naming is unfortunate, because `fromJson` doesn't take JSON (which would be a string); it takes a JavaScript object. Obviously that object has to come from somewhere. Whether a particular component has the ability to perform ajax requests to get that object is of course up to the maker of the component. There are no standards under which chart components (or any other component) must expose ajax functionality. — Heretic Monkey, May 19 '17 at 21:24
Thanks for your reply. I understand what you're saying, the issue is that I very rarely use javascript. — fdkgfosfskjdlsjdlkfsf, May 19 '17 at 22:53

score 1 · Accepted Answer · edited May 23 '17 at 12:34

Original post:

As you can see at the following example, the same data can be stored to an Object named data and then create the chart by using chart = anychart.fromJson(data).draw();

Since you want to get this data from a json file, you will have to use something like this: How to get JSON from URL in Javascript?

$.getJSON('http://your_json_url', function(data) {
    anychart.fromJson(data).draw();
});

anychart.onDocumentReady(function() {


  data = {
    chart: {
      type: "line",
      series: [{
        seriesType: "spline",
        data: [{
          x: "January",
          value: 10000
        }, {
          x: "February",
          value: 12000
        }, {
          x: "March",
          value: 18000
        }]
      }],
      container: "container"
    }
  }
  chart = anychart.fromJson(data).draw();
});

<script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
<div id="container"></div>

<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css">

Edit - working example:

file: test_data.json (take it as it is)

{
    "chart": {
        "type": "line",
        "series": [{
            "seriesType": "spline",
            "data": [{
                "x": "January",
                "value": 10000
            }, {
                "x": "February",
                "value": 12000
            }, {
                "x": "March",
                "value": 18000
            }]
        }],
        "container": "container"
    }
}

file: index.html (modify the url of the json file)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css">
</head>
<body>
    <div id="container"></div>
</body>
</html>


<script>

    $(document).ready(function(){
        $.getJSON('http://localhost/json_chart_test/test_data.json', function(data) {
            console.log(data);
            anychart.fromJson(data).draw();
        });
    });

</script>

I appreciate your answer. Where would I need to plugin the jquery code in the javascript? I rarely use javascript or jquery. — fdkgfosfskjdlsjdlkfsf, May 19 '17 at 21:29
As an addition to your reply, would you be able to include the whole example using jquery to read the json file? Thanks. — fdkgfosfskjdlsjdlkfsf, May 19 '17 at 21:41
I added the jquery code in ``, included the `jquery` library, and eliminated the json string, but it's not reading the file. — fdkgfosfskjdlsjdlkfsf, May 19 '17 at 21:43
I added a working example. I hope this will help you now :-) — tgogos, May 20 '17 at 10:50

Will chart that reads embedded JSON also read JSON file?

1 Answers1

Original post:

Edit - working example: