Cómo mostrar el gráfico JQPLOT en lugar de un texto largo

Tengo un método en la clase de controlador que devuelve datos JSON:

public ActionResult ChartDataJSON()
{
    Chart chart = new Chart();
    DataSet ds = dbLayer.GetChartData();
    DataTable dtChartData = ds.Tables[0];
    List<jqplotModel> chartData = new List<jqplotModel>();

    if (dtChartData .Rows.Count != 0)
    {
        foreach (DataRow row in dtChartData .Rows)
        {
            chartData.Add(new jqplotModel{ Date = DateTime.Parse(@row["Date"].ToString()), Demand= Convert.ToDouble(@row["Demand"].ToString()), Supply= Convert.ToDouble(@row["Supply"].ToString()) });
        }
    }
    return Json(chartData, JsonRequestBehavior.AllowGet);
}

¿Alguien sabe cómo puedo usarlo en mi guión? Intenté con estas líneas pero no se muestra el gráfico.

<script type="text/javascript">
    $(document).ready(function () {
        var types = ['Demand', 'Supply'];               

        var rawData =  function (url, plot, options) {
            var ret = null;
            $.ajax({
                // have to use synchronous here, else the function
                // will return before the data is fetched
                async: false,
                url: url,
                dataType: "json",
                success: function (data) {
                    ret = data;
                }
            });
            return ret;
        };

        // The url for our json data
        var jsonurl = "/ChartController/ChartDataJSON";
        var plotData = []

        for (var i = 0; i < rawData.length; i++) {
            //Parse the date.
            var date = new Date(+rawData[i].Date.match(/\d+/));

            plotData[i] = [date, rawData[i].Demand];
        }

        var plotData2 = []

        for (var i = 0; i < rawData.length; i++) {
            //Parse the date.
            var date = new Date(+rawData[i].Date.match(/\d+/));

            plotData2[i] = [date, rawData[i].Supply];
        }

        var plot1 = $.jqplot('chart1', [plotData, plotData2], {
            height: 300,
            width: 300,
            title: 'Demand Supply',
            dataRenderer: rawData,
            dataRendererOptions: {
                unusedOptionalUrl: jsonurl
            },
            series: [
                    {},
                    { yaxis: 'y2axis' }
            ],
            axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickOptions: { formatString: '%#I %p' },
                    label: "Date",
                    tickInterval: '4 hour'
                },
                yaxis: {
                    label: "Demand",
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer

                },
                y2axis: {
                    label: "Supply",
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                }
            },
            highlighter: {
                show: true,
                sizeAdjust: 1
            },
            cursor: {
                show: false
            },
            legend: {
                show: true,
                labels: types,
                location: 'ne'
            }
        });

        $(window).bind('resize', function (event, ui) {
            if (plot1) {
                plot1.replot();
            }
        });
    });
</script>

Cuando ejecuto esto, no veo el gráfico, y la página muestra un texto largo como este:

[{"Demand": 4422.45, "Supply": 17660, "Date": "/ Date (1236504600000) /", "DateString": "3 PM"}, {"Demand": 5019.27, "Supply": 20699, "Fecha": "/ Date (1236508200000) /", "DateString": "4 PM"}, {"Demand": 5030.35, "Supply": 19917, "Date": "/ Date (1236511800000) /", " DateString ":" 5 PM "}, {" Demand ": 5172.35," Supply ": 23597," Date ":" / Date (1236515400000) / "," DateString ":" 6 PM "}, {" Demand ": 5656.51, "Supply": 21572, "Date": "/ Date (1236519000000) /", "DateString": "7 PM"}, {"Demand": 4622.88, "Supply": 7794, "Date": " Date (1236522600000) / "," DateString ":" 8 PM "}, {" Demand ": 3116.21," Supply ": 3427," Date ":" / Date (1236526200000) / "," DateString ":" 9 PM "}, {" Demand ": 1588.83," Supply ": 1883," Date ":" / Date (1236529800000) / "," DateString ":" 10 PM "}, {" Demand ": 1394.15," Supply ": 1403, "Fecha": "/ Date (1236533400000) /", "DateString": "11 PM"}, {"Demand": 1321.76, "Supply": 3755, "Date": "/ Date (1236537000000) /" , "DateString": "12 AM"}, {"Demand": 1130.98, "Supply": 3474, "Date": "/ Date (1236540600000) /", "DateString": "1 AM"}, {"Demand ": 1277.1," Suministro ": 1072," Fecha ":" / Date (1236544200000) / "," Date String ":" 2 AM "}, {" Demand ": 1214.68," Supply ": 1025," Date ":" / Date (1236547800000) / "," DateString ":" 3 AM "}, {" Demand ": 2117.91, "Supply": 1198, "Date": "/ Date (1236551400000) /", "DateString": "4 AM"}, {"Demand": 1658.97, "Supply": 1485, "Date": " Fecha (1236555000000) / "," DateString ":" 5 AM "}, {" Demand ": 1997.36," Supply ": 3126," Date ":" / Date (1236558600000) / "," DateString ":" 6 AM "}, {" Demand ": 2147.37," Supply ": 4785," Date ":" / Date (1236562200000) / "," DateString ":" 7 AM "}, {" Demand ": 2114.13," Supply ": 5268, "Date": "/ Date (1236565800000) /", "DateString": "8 AM"}, {"Demand": 2389.84, "Supply": 5264, "Date": "/ Date (1236569400000) /" , "DateString": "9 AM"}, {"Demand": 2240.77, "Supply": 5526, "Date": "/ Date (1236573000000) /", "DateString": "10 AM"}, {"Demand ": 1802.43," Supply ": 4530," Date ":" / Date (1236576600000) / "," DateString ":" 11 AM "}, {" Demand ": 1929.71," Supply ": 6618," Date ": "/ Date (1236580200000) /", "DateString": "12 PM"}, {"Demand": 545.65, "Supply": 2767, "Date": "/ Date (1236583800000) /", "DateString": " 1 PM "}, {" Demanda ": 0," Suministro ": 1," Fecha ":" / Date (1236587400000) / "," Dat eString ":" 2 PM "}]

¿Alguien puede ayudarme a resolver el problema y dónde y qué estoy haciendo mal?

Edición: Tenga en cuenta que los datos serían dinámicos y que provendrían de la base de datos y, a través de la codificación en la clase de controlador, devolverán el script JSON a la vista. Por favor, sugiera cómo pasar / usar el objeto JSON (del método ChartDataJSON ()) en jqPlot.

Respuestas a la pregunta(3)

Su respuesta a la pregunta