Using C#/MVC/Razor to create the data from an existing API

[angrykillerpigeons]

My bar charts aren't properly showing. I can see 2 <canvas> displayed (legend <div> is missing ,however).

So my cshtml page contains the following parameters to setup the flot.js but as stated the bar charts aren't displaying 

(Line and pie charts working fine!)

the graphdata in question is here

ddvm.GraphData.BarChart_TransactionCountByMOP = (List<dynamic>)ddvm.PaymentGroups.Select(pg => new { pg.PaymentType, pg.PercentageCountOfTotal, pg.Count, pg.DefaultColor }).ToList<dynamic>();


            return ddvm;

I have detailed another part of this question here at stackoverflow:

var  area_chart_payment_by_day_options = {
        series: {
            lines: {
                show: true,
                fill: .5
            },
            points: { show: true }
        },
        grid: {
            borderWidth: 0,
            hoverable: true
        },
        tooltip: true,
        tooltipOpts: {
            content: "%x : $ %y"
        },
        xaxis: {
            //mode: "categories",
            tickDecimals: 0,
            min:1,
            max:31
        },
        yaxis: {
            tickFormatter: function (y) { return "$ " + y + " "; },
            tickDecimals:0
        }
    }

data function

 $(function () {
            var data = [];
            @Html.Raw("data = " + Json.Encode(Model.GraphData.LineChart_DailyTotal) + ";");   //TODO: LineChart_Daily
            $.plot($("#area_chart_payment_by_day"), area_chart_payment_by_day, 

update function

$.plot($("#area_chart_payment_by_day"), area_chart_payment_by_day, area_chart_payment_by_day_options);