https://www.etvbharat.com/elections/customJS/pie_chart_madhyapradesh.js

1$(document).ready(function () {
2  var chartData;
3
4  var colorMap = {
5    TRS: "#ff00fc",
6    INC: "#0084ff",
7    AIMIM: "#047601",
8    BJP: "#F47216",
9    BRS: "#fd00a7",
10    OTHERS: "#7d7d7d",
11    "Not Declared": "#CCCCCC",
12  };
13
14  // Fetch JSON data from the API
15  function fetchDataAndRefresh() {
16    $.getJSON(
17      //"https://mcapi.etvbharat.com/web_api/website/madhyapradesh_2023/state_common_tally.php",
18      `${process.env.NEXT_PUBLIC_AKAMAI_ELECTION_URL}/json/madhya_pradesh/state_common_tally.json`,
19      function (data) {
20        // Process the JSON data and update the chart
21        updateChart(data.totalresults);
22        updateButtons(data.totalresults);
23      }
24    );
25  }
26  // Initial fetch and refresh
27  fetchDataAndRefresh();
28  $(document).ready(function () {
29    // setInterval(fetchDataAndRefresh, 30000);
30  });
31  // Function to update dynamic buttons based on new data
32  function updateButtons(data) {
33    // Clear the existing buttons
34    $("#buttonContainer").empty();
35
36    // Iterate through the data and create buttons for parties with defined colors
37    data.forEach(function (item) {
38      // Check if the party has a defined color in colorMap
39      if (colorMap[item.party_name]) {
40        var button = $("<button>")
41          .addClass("btn btn-primary")
42          .css({
43            "background-color": colorMap[item.party_name],
44            "border-color": colorMap[item.party_name],
45            color: "white",
46          })
47          .text(`${item.party_name} ${item.total}`)
48          .appendTo("#buttonContainer");
49      }
50    });
51
52    // Check if "Not Declared" entry is present in the chartData
53    var notDeclaredItem = chartData.find(
54      (item) => item.name === "Not Declared"
55    );
56    // Log the contents of chartData
57
58    // If "Not Declared" entry is present and has a defined color
59    if (notDeclaredItem && colorMap["Not Declared"]) {
60      var notDeclaredButton = $("<button>")
61        .addClass("btn btn-primary")
62        .css({
63          "background-color": colorMap["Not Declared"],
64          "border-color": colorMap["Not Declared"],
65          color: "white",
66        })
67        .text(`Not Declared ${notDeclaredItem.y}`)
68        .appendTo("#buttonContainer");
69    }
70  }
71
72  // Function to update the Highcharts chart with new data
73  function updateChart(data) {
74    // Define colors for each party
75
76    // Extract relevant data for the chart
77    chartData = data.map(function (item) {
78      // Set name to 'OTH' if party_name is 'OTHERS'
79      let name =
80        item.party_name === "OTHERS"
81          ? "OTH"
82          : item.party_name === "AIMIM"
83            ? "MIM"
84            : item.party_name;
85      return {
86        name: name,
87        y: parseInt(item.total),
88        color: colorMap[item.party_name] || "#808080", // Use a default color if not found in the map
89      };
90    });
91
92    // Extract the total number of seats
93    var totalSeats =
94      data.find((item) => item.total_seats !== undefined)?.total_seats || 0;
95
96    // Calculate the overall difference
97    // Calculate the overall difference
98    var overallDifference =
99      totalSeats - chartData.reduce((sum, item) => sum + (item.y || 0), 0);
100
101    // Ensure "Not Declared" slice is always included
102    var notDeclaredSlice = {
103      name: "Not Declared",
104      y: overallDifference >= 0 ? overallDifference : 0,
105      color: "#CCCCCC", // You can set a specific color for the "Not Declared" slice
106    };
107
108    // Add the "Not Declared" slice to the chartData array
109    chartData.push(notDeclaredSlice);
110
111    // Highcharts chart configuration
112    Highcharts.chart("mpcurrent", {
113      chart: {

114        plotBackgroundColor: null,
115        plotBorderWidth: 0,
116        marginTop: -120,
117        marginBottom: -120,
118        marginLeft: 0,
119        marginRight: 0,
120      },
121      title: {
122        text: `<div id=mmc>Live Data<br>Total Seats: ${totalSeats}</div>`, // Include total seats in the chart title
123        align: "center",
124        verticalAlign: "middle",
125        y: 60,
126      },
127      tooltip: {
128        pointFormat: "{series.name}: <b>{point.y}</b>",
129      },
130      accessibility: {
131        point: {
132          valueSuffix: "%",
133        },
134      },
135      plotOptions: {
136        pie: {
137          dataLabels: {
138            enabled: true,
139            distance: -50,
140            style: {
141              fontWeight: "bold",
142              color: "white",
143            },
144          },
145          startAngle: -90,
146          endAngle: 90,
147          center: ["50%", "75%"],
148          size: "100%",
149        },
150      },
151      credits: {
152        enabled: false,
153      },
154      legend: {
155        enabled: true,
156        align: "center",
157        verticalAlign: "bottom",
158        layout: "horizontal",
159      },
160      series: [
161        {
162          type: "pie",
163          name: "Elections History Data",
164          innerSize: "60%",
165          data: chartData,
166        },
167      ],
168    });
169  }
170});
171
172/* previous data */
173
174Highcharts.chart("mprevious", {
175  chart: {

176    plotBackgroundColor: null,
177    plotBorderWidth: 0,
178    plotShadow: false,
179    marginTop: -100,
180    marginBottom: -100,
181    marginLeft: 0,
182    marginRight: 0,
183  },
184  title: {
185    text: "<div id=mmp>2018<br>Elections<br>History<br>Data</div>",
186    align: "center",
187    verticalAlign: "middle",
188    y: 60,
189  },
190  tooltip: {
191    pointFormat: "{series.name}: <b>{point.y}</b>",
192  },
193  accessibility: {
194    point: {
195      valueSuffix: "%",
196    },
197  },
198  plotOptions: {
199    pie: {
200      dataLabels: {
201        enabled: true,
202        distance: -50,
203
204        style: {
205          fontWeight: "bold",
206          color: "white",
207        },
208      },
209      startAngle: -90,
210      endAngle: 90,
211      center: ["50%", "75%"],
212      size: "100%",
213      colors: ["#F47216", "#0084ff", "#7d7d7d"], // Specify the colors for each category
214    },
215  },
216  credits: {
217    enabled: false,
218  },
219  legend: {
220    enabled: true, // Set to true to show the legend
221    align: "center",
222    verticalAlign: "bottom",
223    layout: "horizontal",
224  },
225  series: [
226    {
227      innerSize: "150%",
228      type: "pie",
229      name: "Elections History Data",
230      innerSize: "60%",
231      data: [
232        ["BJP", 127],
233        ["INC", 96],
234        ["OTH", 7],
235      ],
236    },
237  ],
238});