How to create a solid gauge chart using amcharts with custom data configuration?

Question

I have a sample AmCharts solid gauge charts and I want to render it using the values from the Category and Size textboxes. For example , the textarea will have this JSON data ,

[
{
      "Country":"Malaysia",
      "Size":260,
      "State":"Selangor",
      "Population":450
   },
   {
      "Country":"England",
      "Size":140,
      "State":"Liverpool",
      "Population":100
   },
   {
      "Country":"China",
      "Size":250,
      "State":"Beijing",
      "Population":200
   },
   {
      "Country":"South Korea",
      "Size":360,
      "State":"Seoul",
      "Population":300
   }
]

Then I set Category to be Country , so it loads 4 axes with 4 labels.

Then I set Size to be Population , so it loads the endValue(startValue starts from 0 right?) to be that. And the percentage is derived from maxValue * 1.2.

My main question is , How do I render a gauge chart using AmCharts with custom data configuration? dataProvider does not seem to work here like it does in serial charts.

Codepen link : https://codepen.io/ariff20/pen/WaKJRV

Correct, dataProvider does not exist in gauge charts. You need to change your approach so that you dynamically convert your data into axes and arrow values. Just map them into the appropriate objects instead of creating a dataProvider-style array. — xorspark
@xorspark map them into the "appropriate" objects? What is considered an appropriate object for this case? — Syed Ariff
The corresponding objects in the makeChart call, of course. You want an axis for each country? array.map your data and return an array of axes. Same goes for labels and bands. Instead of the static setup you have, generate them dynamically from your input. — xorspark

xorspark xorspark · Accepted Answer · 2018-10-24T04:00:24

Elaborating further on my comment - since dataProvider does not exist in a gauge chart, you can remap your data and create the appropriate properties/arrays in your config instead of trying to set them manually in your codepen. For instance, your bands can be generated like so:

  var colors = ["#84b761", "#fdd400", "#cc4748", "#67b7dc"]; //assuming 4 bands/colors - adjust as needed
  var bands = mappedData.reduce(function(acc, d, idx) {
    acc.push({
      color: "#eee",
      startValue: 0,
      endValue: d.target,
      radius: 100 - 20 * idx + "%",
      innerRadius: 85 - 20 * idx + "%"
    });
    acc.push({
      color: colors[idx],
      startValue: 0,
      endValue: d.value,
      radius: 100 - 20 * idx + "%",
      innerRadius: 85 - 20 * idx + "%",
      balloonText: parseFloat(d.value / d.target * 100).toFixed(2)
    });
    return acc;
  }, []);

Labels can be generated in a similar manner:

  var labels = mappedData.map(function(d, idx) {
    return {
      text: d.name,
      x: "49%",
      y: 6 + 9 * idx + "%",
      size: 15,
      bold: true,
      color: colors[idx],
      align: "right"
    };
  });

Once generated, simply fill in the blanks in your setting template and pass it into your makeChart call, clearing any previous instances first:

var chart; //global ref to clear the chart
function changeData() {
  // ... omitted
  var setting = {
    type: "gauge",
    theme: "light",
    axes: [
      {
        axisAlpha: 1,
        tickAlpha: 1,
        labelsEnabled: true,
        startValue: 0,
        endValue: Math.max.apply(
          Math,
          mappedData.map(function(o) {
            return o.target;
          })
        ),
        startAngle: 0,
        endAngle: 270,
        bands: bands
      }
    ],
    allLabels: labels,
    export: {
      enabled: true
    }
  };
  if (chart) {
    chart.clear();
    chart = null;
  }
  chart = AmCharts.makeChart("chartdiv", setting);
}

Demo

How to create a solid gauge chart using amcharts with custom data configuration?

1 Answers