Bootstrap Snippet Pie Chart using HTML jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
    <head>
        <title>dxSample</title>
        
        <!--Framework -->
        <script type="text/javascript" src="lib/jquery-1.9.1.min.js"></script>
        <script type="test/javascript" src="lib/globalize.min.js"></script>
        
        <!-- JS Code -->
        <script type="text/javascript" scr="lib/dx.chartjs.js"></script>
        <script type="text/javascript" scr="PieChart.js"></script>
    </head>
    <body>
        <div id="chartContainer" style="max-width: 700px; height: 400px;"></div>
    </body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(document).ready(function () {
    var dataSource = [
        { cause: "Special Olympics", area: 1707540 },
        { cause: "LLS", area: 998467 },
        { cause: "Other" area: 937261 },
        
    ];
    
    $("#chartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: "cause",
            valueField: "area",
            type: "doughnut",
            innerRadius: 0.5   
        },
        tooltip: {
            enabled: true,
            
            customizeText: function () {
                return this.percent;
            }
        }  
    });  
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Pie Chart"
Bootstrap 3.3.0 Snippet by mgustin12

Related: See More

Questions / Comments:

"Pie Chart" Bootstrap 3.3.0 Snippet by mgustin12

Related: See More

Questions / Comments:

"Pie Chart"
Bootstrap 3.3.0 Snippet by mgustin12