score:1

Accepted answer

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>

Related Query

More Query from same tag