Display HTML5 Canvas Doughnut chart in Bootstrap Modal Popup on Button Click in ASP.Net

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#MyPopup">
    Open Modal</button>
<div id="MyPopup" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    &times;</button>
                <input onclick="return chartdata();" class="btn btn-info" type="submit" value="ShowChart" />
                <div id="pieChart">
                </div>
            </div>
        </div>
    </div>
</div>
<div id="Div1">
</div>
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link type="text/css" rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' />
<script src="//cdn.jsdelivr.net/excanvas/r3/excanvas.js" type="text/javascript"></script>
<script src="//cdn.jsdelivr.net/chart.js/0./Chart.js" type="text/javascript"></script>
<script type="text/javascript">
    function chartdata() {
        var TotalTask = 10;
        var Completed_Task = 5;
        var Rejected = 1;
        var Pending = 2;
        var uncomplete = 2;

        MultiArray = new Array(4);
        MultiArray[0] = new Array(5);
        MultiArray[1] = new Array(5);
        MultiArray[2] = new Array(5);
        MultiArray[3] = new Array(5);

        MultiArray[0][0] = "Completed" // label
        MultiArray[0][1] = Completed_Task // value
        MultiArray[0][2] = "#f56954" // Color
        MultiArray[0][3] = "#f56954" // highlight

        MultiArray[1][0] = "Rejected" // label
        MultiArray[1][1] = Rejected // value
        MultiArray[1][2] = "#00a65a" // Color
        MultiArray[1][3] = "#00a65a" // highlight

        MultiArray[2][0] = "Pending" // label
        MultiArray[2][1] = Pending; // value
        MultiArray[2][2] = "#00c0ef" // Color
        MultiArray[2][3] = "#00c0ef" // highlight

        MultiArray[3][0] = "Uncomplete" // label
        MultiArray[3][1] = uncomplete // value
        MultiArray[3][2] = "#f39c12" // Color
        MultiArray[3][3] = "#f39c12" // highlight

        ShowChart();
        return false;
    }

    function ShowChart() {
        var PieData = new Array();
        for (var i = 0; i < MultiArray.length; i++) {
            if (i < MultiArray.length - 1) {
                var data = {};
                data.label = MultiArray[i][0];
                data.value = MultiArray[i][1];
                data.color = MultiArray[i][2];
                data.highlight = MultiArray[i][3];
                PieData.push(data);
            }
            else {
                var data = {};
                data.label = MultiArray[i][0];
                data.value = MultiArray[i][1];
                data.color = MultiArray[i][2];
                data.highlight = MultiArray[i][3];
                PieData.push(data);
            }
        }

        var el = document.createElement('canvas');
        $("#pieChart")[0].appendChild(el);
        var pieChartCanvas = el.getContext('2d');
        var pieChart = new Chart(pieChartCanvas);

        var pieOptions = {
            // Boolean - Whether we should show a stroke on each segment
            segmentShowStroke: true,
            // String - The colour of each segment stroke
            segmentStrokeColor: '#fff',
            // Number - The width of each segment stroke
            segmentStrokeWidth: 1,
            // Number - The percentage of the chart that we cut out of the middle
            percentageInnerCutout: 50, // This is 0 for Pie charts
            // Number - Amount of animation steps
            animationSteps: 100,
            // String - Animation easing effect
            animationEasing: 'easeOutBounce',
            // Boolean - Whether we animate the rotation of the Doughnut
            animateRotate: true,
            // Boolean - Whether we animate scaling the Doughnut from the centre
            animateScale: false,
            // Boolean - whether to make the chart responsive to window resizing
            responsive: true,
            // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
            maintainAspectRatio: false
        };

        // Create pie or douhnut chart
        // You can switch between pie and douhnut using the method below.
        pieChart.Doughnut(PieData, pieOptions);
    }
</script>