Amcharts.js doesn't draw chart properly

Question

I'm trying to create a chart which shows prices for product from different shops. The problem is that it shows only the first value of every shop instead of all values (cca 10 for every shop).

The data is passed using JSON. Since it has to be multiline chart, I use StockChart.

Do you see where is the problem?

xorspark · Accepted Answer

AmCharts only supports data in date-ascending order so you have to sort your data accordingly. I added this after you loaded your line data, but prior to adding it to your lines array:

          line.sort(function(lhs, rhs) {
            return lhs.date.getTime() - rhs.date.getTime();
          });

Demo below:

var lines = [];
    var dataSets = [];

    generateChartData();

    function generateChartData() {
        var google_chart_json = {"fotolab.sk": [[[2016, 12, 19, 20, 38], 338.36], [[2016, 12, 18, 20, 38], 341.82], [[2016, 12, 17, 20, 38], 382.92], [[2016, 12, 16, 20, 38], 384.24], [[2016, 12, 15, 20, 38], 393.16], [[2016, 12, 14, 20, 38], 319.6], [[2016, 12, 13, 20, 38], 329.64], [[2016, 12, 12, 20, 38], 300.1], [[2016, 12, 11, 20, 38], 324.66], [[2016, 12, 10, 20, 38], 377.9], [[2016, 12, 20, 18, 52], 359.0]], "hej.sk": [[[2016, 12, 19, 20, 38], 380.18], [[2016, 12, 18, 20, 38], 327.4], [[2016, 12, 17, 20, 38], 382.5], [[2016, 12, 16, 20, 38], 389.76], [[2016, 12, 15, 20, 38], 385.23], [[2016, 12, 14, 20, 38], 355.48], [[2016, 12, 13, 20, 38], 328.39], [[2016, 12, 12, 20, 38], 311.35], [[2016, 12, 11, 20, 38], 350.8], [[2016, 12, 10, 20, 38], 389.81], [[2016, 12, 20, 18, 52], 399.0]], "mall.sk": [[[2016, 12, 19, 20, 38], 341.9], [[2016, 12, 18, 20, 38], 319.2], [[2016, 12, 17, 20, 38], 360.81], [[2016, 12, 16, 20, 38], 315.76], [[2016, 12, 15, 20, 38], 347.37], [[2016, 12, 14, 20, 38], 353.97], [[2016, 12, 13, 20, 38], 300.64], [[2016, 12, 12, 20, 38], 302.87], [[2016, 12, 11, 20, 38], 308.8], [[2016, 12, 10, 20, 38], 351.25], [[2016, 12, 20, 18, 52], 399.0]], "shoppie.sk": [[[2016, 12, 19, 20, 38], 363.41], [[2016, 12, 18, 20, 38], 315.55], [[2016, 12, 17, 20, 38], 369.09], [[2016, 12, 16, 20, 38], 369.85], [[2016, 12, 15, 20, 38], 354.29], [[2016, 12, 14, 20, 38], 305.96], [[2016, 12, 13, 20, 38], 387.4], [[2016, 12, 12, 20, 38], 303.95], [[2016, 12, 11, 20, 38], 384.83], [[2016, 12, 10, 20, 38], 303.81], [[2016, 12, 20, 18, 52], 399.0]], "k24.sk": [[[2016, 12, 19, 20, 38], 329.87], [[2016, 12, 18, 20, 38], 349.04], [[2016, 12, 17, 20, 38], 317.51], [[2016, 12, 16, 20, 38], 386.28], [[2016, 12, 15, 20, 38], 371.44], [[2016, 12, 14, 20, 38], 321.24], [[2016, 12, 13, 20, 38], 391.55], [[2016, 12, 12, 20, 38], 372.62], [[2016, 12, 11, 20, 38], 383.1], [[2016, 12, 10, 20, 38], 337.88], [[2016, 12, 20, 18, 52], 310.58]], "ello24.com": [[[2016, 12, 19, 20, 38], 327.53], [[2016, 12, 18, 20, 38], 395.58], [[2016, 12, 17, 20, 38], 366.37], [[2016, 12, 16, 20, 38], 328.88], [[2016, 12, 15, 20, 38], 330.78], [[2016, 12, 14, 20, 38], 349.29], [[2016, 12, 13, 20, 38], 327.62], [[2016, 12, 12, 20, 38], 396.08], [[2016, 12, 11, 20, 38], 336.72], [[2016, 12, 10, 20, 38], 345.49], [[2016, 12, 20, 18, 52], 304.0]]};
        var loopcounter = -1;
        $.each(google_chart_json, function (key, val) {
            var line = [];
            loopcounter = loopcounter + 1;

            $.each(val, function (_, scan) {
                var year = scan[0][0];
                var month = scan[0][1];
                var day = scan[0][2];
                var hour = scan[0][3];
                var minute = scan[0][4];
                var price = scan[1];

                var data = {
                    'date': new Date(year, month - 1, day, hour, minute),
                    'value': price
                };
                line.push(data);
            });
          line.sort(function(lhs, rhs) {
            return lhs.date.getTime() - rhs.date.getTime();
          });

            lines.push([key, line]);
        });
        console.log('LINES');
        console.log(lines);


        $.each(lines, function (_, name_line) {
            var dict = {
                'title': name_line[0],
                "fieldMappings": [{
                    "fromField": "value",
                    "toField": "value"
                }],
                "dataProvider": name_line[1],
                "categoryField": "date"
            };
            dataSets.push(dict);
        });
    }

    var chart = AmCharts.makeChart("chartdiv", {
        "type": "stock",
        "theme": "light",
        "dataSets": dataSets,
        "panels": [{
            "showCategoryAxis": false,
            "title": "Value",
            "percentHeight": 70,

            "stockGraphs": [{
                "id": "g1",
                "valueField": "value",
                "comparable": true,
                "compareField": "value",
                "balloonText": "[[title]]:[[value]]",
                "compareGraphBalloonText": "[[title]]:[[value]]"
            }],
            "stockLegend": {
                "periodValueTextComparing": "[[percents.value.close]]%",
                "periodValueTextRegular": "[[value.close]]"
            }
        }],

        "chartScrollbarSettings": {
            "graph": "g1"
        },

        "chartCursorSettings": {
            "valueBalloonsEnabled": true,
            "fullWidth": true,
            "cursorAlpha": 0.1,
            "valueLineBalloonEnabled": true,
            "valueLineEnabled": true,
            "valueLineAlpha": 0.5
        },

        "periodSelector": {
            "position": "left",
            "periods": [{
                "period": "MM",
                "selected": true,
                "count": 1,
                "label": "1 month"
            }, {
                "period": "YYYY",
                "count": 1,
                "label": "1 year"
            }, {
                "period": "YTD",
                "label": "YTD"
            }, {
                "period": "MAX",
                "label": "MAX"
            }]
        },

        "dataSetSelector": {
            "position": "left"
        },

        "export": {
            "enabled": true
        }
    });
    chart.panelsSettings.recalculateToPercents = "never";

#chartdiv {
  width: 100%;
  height: 400px;
}

Amcharts.js doesn't draw chart properly

Answers (1)

Related Questions

Amcharts.js doesn&#39;t draw chart properly

Answers (1)

Related Questions

Amcharts.js doesn't draw chart properly