Looping in dataLoader amchart v3

Question

I have an array of data, for example, I have 3 Cardview in my view in HTML,

each of the Cardview has their own data, especially in displaying the chart.

I can already get the data in the loop and already can get the value for each chart, but when I run it, only 1 chart is loading and the other 2 Cardview is not loading.

here is my loop and code.

  for(i=0; i<chart.length;i++){ ///Assume that it has a length of 3
        //Single view
        AmCharts.makeChart("chartdiv", {
            type: "serial",
            theme: "light",
            marginRight: 40,
            marginLeft: 40,
            autoMarginOffset: 20,
            mouseWheelZoomEnabled: true,
            dataDateFormat: "YYYY-MM-DD",
            dataLoader: {
                url: url/?id=charr[i].id,
                format: "json"
            },
            categoryField: "date",
            rotate: false, 
            categoryAxis: {
                gridPosition: "start",
                axisColor: "#DADADA",
            },
            valueAxes: [{
                id: "v1",
                axisAlpha: 0,
                position: "left",
                ignoreAxisWidth: true
            }],
            graphs: [{
                id: "g1",
                fillAlphas: 0.5,
                balloon: {
                    borderThickness: 3,
                    horizontalPadding: 17,
                    offsetX: 50,
                    offsetY: 8
                },
                bullet: "round",
                bulletBorderAlpha: 1,
                bulletColor: "#FFFFFF",
                bulletSize: 5,
                hideBulletsCount: 50,
                lineColor: "#2AB4C0",
                lineThickness: 2,
                title: "Total",
                useLineColorForBulletBorder: true,
                valueField: "total",
                balloonText: "[[title]] [[date]]:<b>[[total]]</b>"
            }],
            chartScrollbar: {
                graph: "g1",
                oppositeAxis: false,
                offset: 30,
                scrollbarHeight: 80,
                backgroundAlpha: 0,
                selectedBackgroundAlpha: 0.1,
                selectedBackgroundColor: "#888888",
                graphFillAlpha: 0,
                graphLineAlpha: 0.5,
                selectedGraphFillAlpha: 0,
                selectedGraphLineAlpha: 1,
                autoGridCount: true,
                color: "#AAAAAA"
            },
            chartCursor: {
                pan: true,
                valueLineEnabled: true,
                valueLineBalloonEnabled: true,
                cursorAlpha: 1,
                cursorColor: "#258cbb",
                limitToGraph: "g1",
                valueLineAlpha: 0.2,
                valueZoomable: true
            },
            valueScrollbar: {
                oppositeAxis: false,
                offset: 50,
                scrollbarHeight: 10
            },

            "categoryAxis": {
                labelRotation: 90,
                "wrap": true,
                "parseDates": false,
                "dashLength": 1,
                "minorGridEnabled": true,
            },
            export: {
                enabled: true
            }
        });
    }

Here is my controller

  public function fetch_all_chartdiv(){

      $id= $_GET['id'];

       $data = $this->model->get_all_chart($id);

          foreach ($data as $usg) {
              array_push($arr, ["total" => ($usg->total), "date_created" => $usg->date]);
          }
          echo json_encode($arr);
      }

    }

I can already get the response of the 3 charts, but instead of loading the first response for the chart for the first Cardview

[0]
[1]
[2]

, the value that is showing on the first Cardview is the [2] element instead of First element, I don't know what to do, I've been stuck with this loop in Amchart.

Answer 1

You need to assign different Ids to your different charts. Currently your code is running in a loop 3 times but each time it is assigning the chart to chartdiv.

You need to have 3 Div like below:

<div id="chartdiv0" style="width: 640px; height: 400px;"></div>
<div id="chartdiv1" style="width: 640px; height: 400px;"></div>
<div id="chartdiv1" style="width: 640px; height: 400px;"></div>

Then in your JS Code inside the loop you need to assign chart to correct div.

  for(i=0; i<chart.length;i++){ ///Assume that it has a length of 3
        //Single view
        AmCharts.makeChart("chartdiv" + i , { //Notice i is appended to reference the div.