amCharts cannot display data?

Question

I am new to amCharts and javascript. My html file looks like:

<!DOCTYPE html>
<html>

<head>
    <link rel="shortcut icon" href="">
    <title>chart created with amCharts | amCharts</title>
    <meta name="description" content="chart created using amCharts live editor" />

    <!-- amCharts javascript sources -->
    <script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
    <script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
    <script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>

    <!-- amCharts javascript code -->
    <script type="text/javascript">
        AmCharts.makeChart("chartdiv", {
            "type": "serial",
            "dataLoader": {
                "url": "output.json",
                "format": "json"
            },
            "valueField": "count",
            "titleField": "date"
        });
    </script>
</head>

<body>
    <div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;"></div>
</body>

</html>

My json file:

[{
    "date": "2015-11-17",
    "count": "1"
}, {
    "date": "2015-11-28",
    "count": "1"
}, {
    "date": "2016-01-13",
    "count": "1"
}, {
    "date": "2016-01-22",
    "count": "1"
}]

By using http-server -o, Local host opens up in the Chrome browser. http://127.0.0.1:8080/test2.html

test2.html and output.json are in the same directory

I can see from the chromeconsole, it is loading the json file properly.

I am not able to figure out why the data is not showing up in the chart. I tried browsing and looking at other examples, kind of stuck.

Answer 1

Your chart is missing a few pieces that you can find in any of the line/column demos on the amCharts site . Here's what you're missing:

You're missing a graphs array. This is required for a serial chart (it looks like you started from a pie chart, which is completely different). Each graph object in the graphs array contains a valueField .
Your chart is missing a categoryField .
It looks like your data has dates, so you'll need to create a categoryAxis and set parseDates to true. You'll also want to set a dataDateFormat string in the top level of your chart config as well so that the chart knows how to parse your dates consistently across all browsers.

Assuming you want a line chart, here's the bare minimum makeChart call you need for your data:

    AmCharts.makeChart("chartdiv", {
        "type": "serial",
        "dataLoader": {
            "url": "output.json",
            "format": "json"
        },
        "graphs": [{
          "valueField": "count"
        }],
        "categoryField": "date",
        "dataDateFormat": "YYYY-MM-DD",
        "categoryAxis": {
           "parseDates": true
        }
    });

Demo

amCharts cannot display data?

Question

1 answers

solution1
1 ACCPTED 2016-12-02 19:37:03

amCharts cannot display data?

Question

1 answers

solution1 1 ACCPTED 2016-12-02 19:37:03

solution1
1 ACCPTED 2016-12-02 19:37:03