charting Using Knockout

Include
www.highcharts.com
or
http://d3pie.org/
 or
http://www.chartjs.org/

<div class="row">
                <div class="col-xs-12 col-sm-12 droid border">
                    <h4 style="padding-top:10px">طلبات حجز السكن</h4>
                    <hr />
                    <div class="col-xs-12" id="allocationRequstPie">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-12 droid border">
                    <br /><br />
                    <div class="col-xs-12" id="allocationRequestBar">
                    </div>
                </div>
            </div>

@section Scripts {

    <script src='@Url.Content("~/JS_DTO/DashBoardDTO.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/JS_UI/DashBoardUI.js")' type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {
            var owner = new DashBoardVM();
            owner.DashBoard = new DashBoardDTO(new Object());
            owner.GetRequestCountAllocationRequest();
            owner.GetRequestCountExchange();
            owner.AllocationRequestPie();
            owner.AllocationRequestBar();
            owner.ExchangePie();
            owner.ExchangeBar();
            ko.applyBindings(owner);
        });

    </script>
}

function DashBoardVM() {

    var self = this;
    self.allocationRequestList = ko.observableArray([]);
    self.exchangeList = ko.observableArray([]);

    //self.allocationRequestList = ko.observableArray([]);
    var allocationRequestList = [];
    var exchangeList = [];

    self.AllocationRequestPie = function () {

            var data = allocationRequestList;

            // Highcharts requires the y option to be set
            $.each(data, function (i, point) {
                point.y = point.data;
            });


            var chart = new Highcharts.Chart({

                chart: {
                    style: {
                        direction: 'rtl',
                    },
                    renderTo: 'allocationRequstPie',
                    type: 'pie',
                    alignTicks: true,
                    animation: true,
                    backgroundColor: '#f5f5f5',
                    reflow: true,
                    height:250
                },

                title: {
                    text: ''
                },

                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name} ({point.data})</b>',
                            style: {
                                fontSize: '10px',
                            },
                            useHTML: true
                        }
                    }
                },


                legend: {
                    rtl: true,
                    useHTML: true
                },

                tooltip: {
                    pointFormat: '<b>{point.percentage:.1f}%</b>',
                    style: {
                        color: '#333333',
                        fontSize: '14px'
                    },
                    useHTML: true
                },


                series: [{
                    data: data
                }]

            });
        }

        self.AllocationRequestBar = function () {

            var data = allocationRequestList;

            // Highcharts requires the y option to be set
            $.each(data, function (i, point) {
                point.y = point.data;
            });


            var chart = new Highcharts.Chart({

                chart: {
                    style: {
                        direction: 'rtl',
                    },
                    height:300,
                    renderTo: 'allocationRequestBar',
                    type: 'column',
                    alignTicks: true,
                    animation: true,
                    backgroundColor: '#f5f5f5',
                    reflow: true
                },

                title: {
                    text: ''
                },

                xAxis: {
                    type: 'category',
                    labels: {
                        rotation: -45,
                        style: {
                            fontSize: '13px',
                            fontFamily: 'Verdana, sans-serif'
                        },
                        useHTML: true
                    }
                },
                yAxis: {
                    allowDecimals: false,
                    min: 0,
                    title: {
                        text: ''
                    },
                    useHTML: true
                },
                legend: {
                    enabled: false,
                },
                tooltip: {
                    pointFormat: '<b>{point.y:1f}  </b>',
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        colorByPoint: true
                    }
                },
                colors: [
                    '#3498db',
                    '#27ae60',
                    '#53AAAA',
                    '#FF9655',
                    '#9b59b6',
                    '#2EB8E6',
                    '#FF6699'
                ],
                series: [{
                    data: data,
                    useHTML: true
                }],
                dataLabels: {
                    enabled: true,
                    rotation: -90,
                    color: '#FFFFFF',
                    align: 'center',
                    x: 4,
                    y: 10,
                    style: {
                        fontSize: '16px',
                        fontFamily: 'Verdana, sans-serif',
                        textShadow: '0 0 3px black'
                    }
                }
            });
        }
}