Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script src="http://igniteui.com/js/modernizr.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>
  
<script id="budgetTooltipTemplate" type="text/x-ig-tmpl">
        <div class="ui-chart-tooltip">
            <div class='bold'>${item.Label}</div>
            <div>Budget: <label class='bold'>$${item.Budget}K</label></div>
        </div>
    </script>
​
<div class="title">Departments</div>
    <div class="subtitle">Budget (inner ring) and Department Size (outer ring)</div>
​
    
    <div id="chart"></div>
​
    <br />
    <table class="options" style="max-width: 550px; width: 100%;">
        <tr>
            <td>InnerExtent:</td>
            <td class="optionTdWidth">
                <div id="innerExtent" class="optionTdWidth"></div>
            </td>
        </tr>
        <tr>
            <td>Start Angle for the Budget Series
            </td>
            <td class="optionTdWidth">
                <div id="angleBudget" class="optionTdWidth"></div>
            </td>
        </tr>
        <tr>
            <td>Start Angle for the Department Size Series
            </td>
            <td class="optionTdWidth">
                <div id="angleDepartmentSize" class="optionTdWidth"></div>
            </td>
        </tr>
        <tr>
            <td>Label Position for the Budget Series:</td>
            <td class="optionTdWidth">
                <select id="labelPosition" class="optionTdWidth">
                    <option value="center" selected="selected">Center</option>
                    <option value="insideEnd">Inside End</option>
                    <option value="bestFit">Best Fit</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Label Position for the Department Size Series:</td>
            <td class="optionTdWidth">
                <select id="labelPosition2" class="optionTdWidth">
                    <option value="center">Center</option>
                    <option value="insideEnd">Inside End</option>
                    <option value="outsideEnd" selected="selected">Outside End</option>
                    <option value="bestFit">Best Fit</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Label Extent (Outside End)</td>
            <td class="optionTdWidth">
                <div id="labelExtent" class="optionTdWidth"></div>
            </td>
        </tr>
    </table>
 
$(function () {
            var data = [
              { "attacksource": 43, "attacktype": 60, "AT":"DoS","Label": "iNISDE" },
                { "attacksource": 29, "attacktype": 40, "AT":"login abuse","Label": "outside" } ];
​
            $("#chart").igDoughnutChart({
                width: "100%",
                height: "550px",
                innerExtent: 20,
                series:
                    [
                        {
                            name: "DepartmentSize",
                            labelMemberPath: "Label",
                            valueMemberPath: "attacksource",
                            dataSource: data,
                            labelsPosition: "center",
                            showTooltip: true,
                            tooltipTemplate: "<div class='ui-chart-tooltip'><div class='bold'>${item.Label}</div><div>attacksource: <label class='bold'>${item.attacksource}</label></div></div>"
                        },
                        {
                            name: "Budget",
                            labelMemberPath: "AT",
                            valueMemberPath: "attacktype",
                            dataSource: data,
                            labelsPosition: "outsideEnd",
                            showTooltip: true,
                            tooltipTemplate: "<div class='ui-chart-tooltip'><div class='bold'>${item.Label}</div><div>attack type Size: <label class='bold'>${item.attacktype}</label></div></div>"
                        },
                      {
                            name: "Budget",
                            labelMemberPath: "AT",
                            valueMemberPath: "attacktype",
                            dataSource: data,
                            labelsPosition: "outsideEnd",
                            showTooltip: true,
                            tooltipTemplate: "<div class='ui-chart-tooltip'><div class='bold'>${item.Label}</div><div>attack type Size: <label class='bold'>${item.attacktype}</label></div></div>"
                        }
                      
                      
                      
                      
                      
                      
                    ]
            });
​
            $("#angleBudget").slider({
                slide: function (event, ui) {
                    $("#chart").igDoughnutChart("option", "series", [{ name: "Budget", startAngle: ui.value }]);
                },
                min: 0,
                max: 360
            });
​
            $("#angleDepartmentSize").slider({
                slide: function (event, ui) {
                    $("#chart").igDoughnutChart("updateSeries", { name: "DepartmentSize", startAngle: ui.value });
                },
                min: 0,
                max: 360
            });
​
            $("#innerExtent").slider({
                slide: function (event, ui) {
                    $("#chart").igDoughnutChart("option", "innerExtent", ui.value);
                },
                min: 0,
                max: 80,
                value: 20
            });
​
            $("#labelExtent").slider({
                slide: function (event, ui) {
                    $("#chart").igDoughnutChart("updateSeries", { name: "DepartmentSize", labelExtent: ui.value });
                },
                min: 0,
                max: 50,
                value: 10
            });
​
            $("#explodedRadius").slider({
                slide: function (event, ui) {
                    $("#chart").igPieChart("option", "explodedRadius", ui.value / 100);
                },
                min: 0,
                max: 100,
                value: 20
            });
            
            $("#labelPosition").change(function (e) {
                var labelPosition = $(this).val();
                $("#chart").igDoughnutChart("updateSeries", { name: "Budget", labelsPosition: labelPosition });
            });
            
            $("#labelPosition2").change(function (e) {
                var labelPosition = $(this).val();
                $("#chart").igDoughnutChart("updateSeries", { name: "DepartmentSize", labelsPosition: labelPosition });
                $("#labelExtent").slider("option", "disabled", labelPosition != "outsideEnd");
            });
​
        });
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers