JSFiddle - React, Tailwind, and code Playground

by dixonj16

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/jquery/20132/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20132/latest/js/infragistics.dv.js"></script>
<link href="http://cdn-na.infragistics.com/jquery/20132/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/jquery/20132/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<div style="float: left; width: 70%;">
    <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 = [
    { "label": "Inside", "attacks": 8 },
    { "label": "Outside", "attacks": 6 },

    // Inside 
    { "label": "Dos", vector: "Inside", "dummyValue": 6 },
    { "label": "siem", detect: "Dos", "detectValue": 3 },
    { "label": "user", detect: "Dos", "detectValue": 3 },

    { "label": "Worm", vector: "Inside", "dummyValue": 2 },
    { "label": "siem", detect: "Worm", "detectValue": 1 },
    { "label": "user", detect: "Worm", "detectValue": 1 },

    // Outside
    { "label": "Spying", vector: "Outside", "dummyValue": 3 },
    { "label": "siem", detect: "Spying", "detectValue": 1.5 },
    { "label": "user", detect: "Spying", "detectValue": 1.5 },

    { "label": "Social", vector: "Outside", "dummyValue": 3},
    { "label": "siem", detect: "Social", "detectValue": 1.5 },
    { "label": "user", detect: "Social", "detectValue": 1.5 },
  ];

  $("#chart").igDoughnutChart({
    width: "100%",
    height: "550px",
    innerExtent: 6,
    series:
    [
      {
        name: "Attack Type",
        labelMemberPath: "label",
        valueMemberPath: "attacks",
        dataSource: data,
        labelsPosition: "center"
      },
      {
        name: "Attack Vector",
        labelMemberPath: "label",
        valueMemberPath: "dummyValue",
        dataSource: data,
        labelsPosition: "center"
      },
      {
        name: "detect Vector",
        labelMemberPath: "label",
        valueMemberPath: "detectValue",
        dataSource: data,
        labelsPosition: "center"
      }
    ]
  });
});