JSFiddle - React, Tailwind, and code Playground

by jatinder_singh02

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<div style="float: left; width: 70%;">
        <div style="text-align: center; width: 100%; font: 16px Arial, Helvetica, sans-serif;">Top 5 Most Populated Countries</div>
        <div style="text-align: center; width: 100%; margin: 10px 0; font: 12px Arial, Helvetica, sans-serif;">1990 (inner ring) vs 2008 (outer ring)*</div>

        
        <div id="chart"></div>

        <div style="margin: 10px 0; font: 12px Arial, Helvetica, sans-serif;">*Population measured in millions</div>
    </div>
    <div id="legend" style="float: left"></div>

JavaScript

$(function () {

            var data = [
                { "Region": "China", "Tvar": 1141, "Pop2008": 1333, "Pop2025": 1458 },
                { "Region": "India", "Tvar": 849, "Pop2008": 1140, "Pop2025": 1398 },
                { "Region": "United States", "Tvar": 250, "Pop2008": 304, "Pop2025": 352 },
                { "Region": "Indonesia", "Tvar": 178, "Pop2008": 228, "Pop2025": 273 },
                { "Region": "Brazil", "Tvar": 150, "Pop2008": 192, "Pop2025": 223 }
            ];

            $("#chart").igDoughnutChart({
                width: "100%",
                height: "550px",
                innerExtent: 20,
                series:
                [
                   
                    {
                        name: "Tvar",
                        labelMemberPath: "Region",
                        valueMemberPath: "Tvar",
                        dataSource: data,
                        legend: { element: "legend" },
                        formatLabel: function (context) {
                            return context.itemLabel + " (" + context.item.Tvar + ")";
                        }
                    }
                ],
                // the legend items get refreshed every time the doughnut is re-rendered
                // use this event to update the legend items labels
                holeDimensionsChanged: function () {
                    //updateLegendItems();
                }
            });

            // the legend items have the value associated with the specific series in parentheses ()
            // remove this text making the legend applicable for both series
            function updateLegendItems() {
                $(".ui-chart-legend-item-text > span").each(function () {
                    var txt = $(this).text();
                     alert(txt);
                    idx = txt.lastIndexOf("(");
                    if (idx != -1) {
                   
                        $(this).text(txt.substr(0, idx));
       ...