CODEWITHSUNDEEP
amcharts
Abhranil Majumder
Abhranil Majumder

Reputation: 35

AM Chart not displaying properly with bulk data in pie chart

My amChart is not showing properly, datas are getting truncated. And I am not getting the information in info box as well. enter image description herePlease refer to the screenshot attached and help accordingly.

Beside that how can I show a chart with blank record. ie No content available when there is no data. But I dont want to get the blank legends which are generating automatically with blank data.

Upvotes: 0

Views: 1252

Answers (2)

xorspark
xorspark

Reputation: 16012

With regards to the labels, your options kind of limited as the pie chart tries to make a best effort in not having the labels overlap, which can cause the out of bounds rendering you're experiencing.

If you need to see all the labels, you can try to adjust one or a combination of the labelRadius, startAngle and pullOutRadius properties to make more room for the chart and labels.

labelRadius reduces distance of labels from the chart.

startAngle determines where the pie chart will start drawing. Setting it to 0 will make the pie start and end on the left, where there is usually more space for all the labels crammed in one space.

pullOutRadius determines the distance of the slice pull out when you click on it. Setting it to a smaller value will make the chart bigger, larger will shrink it. This takes either a percentage string or numeric values.

Given your screenshot, a more effective approach is to hide the labels coming from the very small slices by setting hideLabelsPercent to the maximum value that you want to hide. For example, setting it to 3 will hide all labels that are < 3% of the pie.

As for displaying "This chart has no data", you can work with @RakeshTpripathi's answer, but you have to disable the legend to prevent the legend from showing the empty values. Just add the code below somewhere in the plugin to disable the legend:

//disable the legend if enabled
if (chart.legend) {
  chart.legend.enabled = false;
}

Here's an example which uses this modification:

/**
 * amCharts Plugin: handle empty pie chart, automatically disables legend if enabled.
 */
AmCharts.addInitHandler(function(chart) {
  
  // check if data is mepty
  if (chart.dataProvider === undefined || chart.dataProvider.length === 0) {
    // add some bogus data
    var dp = {};
    dp[chart.titleField] = "";
    dp[chart.valueField] = 1;
    chart.dataProvider.push(dp)
    
    dp = {};
    dp[chart.titleField] = "";
    dp[chart.valueField] = 1;
    chart.dataProvider.push(dp)
    
    dp = {};
    dp[chart.titleField] = "";
    dp[chart.valueField] = 1;
    chart.dataProvider.push(dp)
    
    // disable slice labels
    chart.labelsEnabled = false;
    
    // add label to let users know the chart is empty
    chart.addLabel("50%", "50%", "The chart contains no data", "middle", 15);
    
    //disable the legend if enabled
    if (chart.legend) {
      chart.legend.enabled = false;
    }
    
    // dim the whole chart
    chart.alpha = 0.3;
  }
  
}, ["pie"]);

var chart = AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "theme": "light",
  "legend": { "enabled": true }, //will be automatically disabled by the plugin
  "dataProvider": [],
  "valueField": "value",
  "titleField": "title"
});
#chartdiv {
  width: 100%;
  height: 300px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

Upvotes: 1

Rakesh Tripathi
Rakesh Tripathi

Reputation: 43

You can use below code when there will blank data. It will show "The chart contain no data"

AmCharts.addInitHandler(function(chart) {
if (chart.dataProvider === undefined || chart.dataProvider.length === 0) {
  var dp = {};
    dp[chart.titleField] = "";
    dp[chart.valueField] = "";
    chart.dataProvider.push(dp)
    
    var dp = {};
    dp[chart.titleField] = "";
    dp[chart.valueField] = "";
    chart.dataProvider.push(dp)
    
    var dp = {};
    dp[chart.titleField] = "";
    dp[chart.valueField] = "";
    chart.dataProvider.push(dp)
    
    // disable slice labels
    chart.labelsEnabled = false;
    
    // add label to let users know the chart is empty
    chart.addLabel("50%", "50%", "The chart contains no data", "middle", 15);
    
    // dim the whole chart
    chart.alpha = 0.3;

}
}, ["pie"]);

Upvotes: 1

Related Questions