CODEWITHSUNDEEP
javascriptphpjsonamcharts
self-learner
self-learner

Reputation: 33

amCharts not displaying json data

I am trying to use amcharts using javascript and display it in php. I have jSON-data.php which request data from mysql db and sends json which looks like:

[
{"item":"Clinical Items","qty":"9200"},
{"item":"Stationary","qty":"10026"},
{"item":"Cleaning","qty":"28400"}
]

But not displaying chart. Chart section is empty. Below is my js code.

AmCharts.makeChart("chartdiv", {
  type: "serial",
  dataLoader: {
    url: "jSON-data.php",
    format: "json"
  },
  categoryField: "item",
  rotate: false,

  categoryAxis: {
    gridPosition: "start",
    axisColor: "#2471A3 "
  },
  valueAxes: [
    {
      axisAlpha: 0.2
    }
  ],
  graphs: [
    {
      type: "column",
      title: "Prouduct Usage:",
      valueField: "qty",
      lineAlpha: 0,
      fillColors: "#2471A3",
      fillAlphas: 0.8,
      balloonText: "[[title]] in [[category]]:<b>[[value]]</b>"
    }
  ],
  valueAxes: [
    {
      axisAlpha: 0,
      position: "left",
      title: "Product Usage Quantity"
    }
  ],
  export: {
    enabled: true
  }
});

What is preventing in displaying the graph. Please help me to resolve this problem. Thank you in advance.

Upvotes: 0

Views: 2377

Answers (1)

Darlesson
Darlesson

Reputation: 6162

Your chart should work with the current setup and data format. As xospark mentioned, you may be missing the chart dimension as shown below:

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

If that is not the case, then the issue is with the dataLoader setup, or the endpoint itself.

I recommend you to check what is coming back from your endpoint, and add showErrors: true to your data loader.

Please check your example working below without the endpoint.

AmCharts.makeChart("chartdiv", {
  type: "serial",
  dataProvider: [
{"item":"Clinical Items","qty":"9200"},
{"item":"Stationary","qty":"10026"},
{"item":"Cleaning","qty":"28400"}
],
  categoryField: "item",
  rotate: false,

  categoryAxis: {
    gridPosition: "start",
    axisColor: "#2471A3 "
  },
  valueAxes: [
    {
      axisAlpha: 0.2
    }
  ],
  graphs: [
    {
      type: "column",
      title: "Prouduct Usage:",
      valueField: "qty",
      lineAlpha: 0,
      fillColors: "#2471A3",
      fillAlphas: 0.8,
      balloonText: "[[title]] in [[category]]:<b>[[value]]</b>"
    }
  ],
  valueAxes: [
    {
      axisAlpha: 0,
      position: "left",
      title: "Product Usage Quantity"
    }
  ],
  export: {
    enabled: true
  }
});
#chartdiv {
    width: 100%;
    height: 300px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

<div id="chartdiv"></div>

Upvotes: 2

Related Questions