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.
Advertisement
Answer
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.