CODEWITHSUNDEEP
jqueryjsonajaxamcharts
Jon
Jon

Reputation: 149

how to create amcharts with multiple nested json objects

Hello I'm using amcharts, i want to creat amchart using dataloader plugin, api response having nested object. I tried it, but it wont work. My json response in like this. Also i want to convert 24hrs time to 12 hrs time (Slot in json) How do i create chart using this type of json using dataloader plugin
Fiddle

         {
        "driver_data": [
            {
                "slot": 0,
                "rideCount": 0
            },
            {
                "slot": 30,
                "rideCount": 0
            },
            {
                "slot": 100,
                "rideCount": 0
            },
            {
                "slot": 130,
                "rideCount": 0
            },
            {
                "slot": 200,
                "rideCount": 0
            }
        ],
        "passenger_data": [
            {
                "slot": 0,
                "rideCount": 0
            },
            {
                "slot": 30,
                "rideCount": 0
            },
            {
                "slot": 100,
                "rideCount": 0
            },
            {
                "slot": 130,
                "rideCount": 0
            },
            {
                "slot": 200,
                "rideCount": 0
            },
            {
                "slot": 230,
                "rideCount": 0
            },

        ]
    }

Upvotes: 0

Views: 709

Answers (1)

xorspark
xorspark

Reputation: 16012

FYI - AmCharts does not support nested JSON data. You need to convert it first.

First thing you need to do is actually include the dataloader.min.js file. The dataLoader is an external plugin, just like export, so it requires a separate include.

<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>

Second, make sure you have CSS set on your chart div. You don't have any in your fiddle.

#ridecounts {
    width: 100%;
    height: 500px;
}

Lastely, you need to use a postProcess callback in your dataLoader to create a compatible JSON format - a single flattened array grouped by your categoryField. Since you named your valueField properties based on the array key names, make those your valueField when you reformat your data into an array of objects

dataLoader: {
    url: "...",
    // ...
    postProcess: function(jsonResponse, dataLoaderConfig, chart) {
      var categoryField = chart.categoryField;
      var newData = [];
      var groupedData = {};
      Object.keys(jsonResponse).forEach(function(arrayKey) {
        jsonResponse[arrayKey].forEach(function(dataItem) {
          if (!groupedData[dataItem[categoryField]]) {
            groupedData[dataItem[categoryField]] = {};
            groupedData[dataItem[categoryField]][categoryField] =
              dataItem[categoryField];
          }
          groupedData[dataItem[categoryField]][arrayKey] = dataItem.rideCount;
        });
      });
      Object.keys(groupedData).forEach(function(groupedKey) {
        newData.push(groupedData[groupedKey]);
      });
      return newData; //returns [{slot: 0, driver_data: 0, passenger_data: 0}, ...]
    }
}

Codepen.

I'm not sure what you mean by converting 12/24 hour format as your data is not datetime based.

Upvotes: 1

Related Questions