@model HeathAppDesign.Model.ChartModel
@{
    ViewBag.Title = "Index";
}
<h2>
    Index</h2>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<script type="text/javascript">
    $(document).ready(function () {
        $('#ChartTypes').change(function () {


            var selectedID = $(this).val();
            $.ajax({
                url: '/charts/GetChart/4',
                type: 'GET',
                success: function (result) {
                    debugger;
                    var res = JSON.stringify(result);
                    $('#div-Graph').append(res);
                    alert($('#div-Graph').html());
                }
            });

        });
    });
</script>
<div>


    <select id="ChartTypes">
        <option id="Chart1" value="0">Projected Annual Cost per Member</option>
        <option id="Chart2" value="1">Projected Annual Cost to Employer by Plan</option>
        <option id="Chart3" value="2">Total Projected Cost</option>
        <option id="Chart4" value="3">Renewal Year PMPM Cost</option>
        <option id="Chart5" value="4">Paid Or Allowed Ratio by Plan</option>
        <option id="Chart6" value="5">Impact of Plan Design Changes on 2017 Costs</option>
        <option id="Chart7" value="6">5 Year Projected Plan Change Impact</option>
        <option id="Chart8" value="7">Impact of Trend Over Time</option>
    </select>
    <div id="div-Graph">

    </div>
</div>

@model IEnumerable<HeathAppDesign.Model.ChartModel>


<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });


</script>
<script type="text/javascript">
    $(function () {

        chartsdata = '@Model'
        alert(chartsdata);
        google.charts.load('current', { 'packages': ['bar'] });
        google.charts.setOnLoadCallback(drawStuff);

        function drawStuff() {
            var data = new google.visualization.DataTable();

            data.addColumn('string', '');
            data.addColumn('number', '');

            for (var i = 0; i < chartsdata.length; i++) {
                data.addRow([chartsdata[i].XCoordinates, chartsdata[i].YCoordinates]);
            }

            var options = {
                title: 'Paid/Allowed Ratio by Plan',
                width: 500,
                legend: { position: 'none' },
                trendlines: { 0: {} },
                bars: 'vertical', // Required for Material Bar Charts
                vAxis: { viewWindow: { min: 90, max: 100 }, gridlines: { count: 11} },

                bar: { groupWidth: "20%" }
            };

            var chart = new google.charts.Bar(document.getElementById('chartdiv'));
            chart.draw(data, options);
        };


    });

</script>
<h2>
    Chart5</h2>
<div id="chartdiv" style="width: 600px; height: 350px; margin: 0 auto;">
</div>

[HttpGet]
        public ActionResult GetChart(int id)
        {
            return PartialView("_PaidOrAllowedRatio",
                      objChartService.GetChartCoordinates(ChartTypes.PaidOrAllowedRatioByPlan));
        }