MyPieChart

Loads multiple pie chart

by Mohammed Sadiq M C

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<p>
On clicking Load Chart button, the chart displays as needed.. No issue with horizontal alignment.
</p>
<button id="loadGraphBtn">Load Chart</button>

<p>
Try hiding the div that displays the chart and then click Load Chart to see the issue
</p>
<button id="hideChartBtn">Hide Chart</button>

<div id="graph-result"></div>

CSS

.panel {
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
  display: inline-block;
  width: 100%;
  font-weight: 400 !important;
  background-color: #ffffff;
}
.panel + .panel {
  margin-top: 20px;
}
.pam {
  padding-top: 10px;
}

JavaScript

// A JSON structure recieved from backend server
var graphData = {
  "Data": {
    "GraphListData": [
      {
        "GroupingField": {
          "En": "Cycle",
          "Ar": "المرحلة الدراسية"
        },
        "GraphDetails": [
          {
            "Item": {
              "En": "Common",
              "Ar": "مشتركة"
            },
            "Count": 4248
          },
          {
            "Item": {
              "En": "Cycle1",
              "Ar": "حلقة أولى"
            },
            "Count": 3659
          },
          {
            "Item": {
              "En": "Cycle2",
              "Ar": "حلقة ثانية"
            },
            "Count": 2513
          },
          {
            "Item": {
              "En": "Cycle3",
              "Ar": "حلقة ثالثة"
            },
            "Count": 14114
          },
          {
            "Item": {
              "En": "KG",
              "Ar": "KG"
            },
            "Count": 11052
          }
        ]
      },
      {
        "GroupingField": {
          "En": "Region",
          "Ar": "المنطقة"
        },
        "GraphDetails": [
          {
            "Item": {
              "En": "Abu Dhabi",
              "Ar": "المكتب الإقليمي في أبوظبي"
            },
            "Count": 65639
          },
          {
            "Item": {
              "En": "Al Ain",
              "Ar": "المكتب الإقليمي في العين"
            },
            "Count": 54648
          },
          {
            "Item": {
              "En": "Al Gharbia",
              "Ar": "المكتب الإقليمي في الغربية"
            },
            "Count": 9398
          },
          {
            "Item": {
              "En": "Ras Al Khaimah",
              "Ar": " رأس الخيمة"
            },
            "Count": 91
          }
        ]
      }
    ]
  }
};

var temp_GraphListData;
var isArabic = 1; // For Arabic set as 1;


//$(document).ready(function () {
$(function () {
	loadGraph();
  
  $("#loadGraphBtn").on('click', function () {
   ...