Geek Answers Handbook

How to display a JQPLOT chart, not long text

I have a method in a controller class that returns JSON data:

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);
}

Does anyone know how I can use it in my script. I tried with these lines, but it does not show a graph

<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>

When I run this, I don’t see the chart, and the page displays a long text:

[{ "" : 4422.45, "" : 17660, "" : "/ (1236504600000)/", "DateString" : "3 PM" }, { "" : 5019.27, "" ,: 20699, "" : " (1236508200000)/", "DateString" : "4 PM" }, { "" : 5030,35, "" : 19917, "" : "/ (1236511800000)/", "DateString" : "5 PM" }, { "" : 5172.35, "" : 23597, "" : "/ (1236515400000)/", "DateString" : "6 PM" }, { "" : 5656,51, "" : 21572, "" : "/ (1236519000000)/", "DateString" : "7 PM" }, { "" : 4622,88, "" : 7794, "" ,: " (1236522600000)/", "DateString" : "8 PM" }, { "" : 3116.21, "" : 3427, "" : "/ (1236526200000)/", "DateString" : "9 " }, { "" : 1588,83, "" : 1883, "" : "/ (1236529800000)/", "DateString" : "10 PM" }, { "" : 1394.15, ": 1403, "" :"/ (1236533400000)/", "DateString" :" 11 PM "}, { "" : 1321,76, "" : 3755, "" :"/ (1236537000000) )/", "DateString" :" 12 AM "}, {" Demand ": 1130.98," Supply ": 3474," Date ":" /Date (1236540600000)/", "DateString" :" 1 AM "}, { "" : 1277,1, "" : 1072, "" : "/Date (1236544200000)/ "," D ateString ":" 2 AM "}, { "" : 1214.68, "" : 1025, "" :"/ (1236547800000)/", "DateString" :" 3 AM "}, { "" : 2117.91, "" : 1198, "" : "/ (1236551400000)/", "DateString" : "4 AM"}, { "" : 1658,97, "" : 1485, "" : "/ (1236555000000)/", "DateString" :" 5 AM "}, {" Demand ": 1997.36," Supply ": 3126," Date ":" /Date (1236558600000)/", "DateString" :" 6 AM "}, { "" : 2147.37, "" : 4785, "" :"/ (1236562200000)/", "DateString" :" 7 AM "}, { "" : 2114.13, "" : 5268, "" : "/ (1236565800000)/", "DateString" : "8 AM"}, { "" : 2389.84, "" : 5264, "" : "/ (1236569400000)/", "DateString" : "9 AM"}, { "" : 2240.77, "" : 5526, "" : "/ (1236573000000)/", "DateString" : "10 AM "}, {" ": 1802.43, "" : 4530, "" :"/ (1236576600000)/", "DateString" :" 11 AM "}, { "" : 1929.71, "" : 6618, "" : "" (1236580200000)/", "DateString" : "12 PM" }, { "" : 545,65, "" : 2767, "" : "/ (1236583800000)/", "DateString" : 1 PM "}, { "" : 0, "" : 1, "" :"/ (1236587400000)/", "DateString" :" 2 PM "}]

- ?

: , , JSON script . , , / JSON ( ChartDataJSON()) jqPlot.

+4
3

, .

:

public class jqPlotController : Controller
{    
    public ActionResult ChartDataJSON()
    {
        var chartData = new List<jqplotModel>();

        var point1 = new jqplotModel { Date = DateTime.Now.Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(1), Supply = Convert.ToDouble(3) };
        var point2 = new jqplotModel { Date = DateTime.Now.AddDays(10).Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(2), Supply = Convert.ToDouble(4) };
        var point3 = new jqplotModel { Date = DateTime.Now.AddDays(31).Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(6), Supply = Convert.ToDouble(6) };
        var point4 = new jqplotModel { Date = DateTime.Now.AddDays(106).Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(4), Supply = Convert.ToDouble(2) };
        chartData.Add(point1);
        chartData.Add(point2);
        chartData.Add(point3);
        chartData.Add(point4);

        return Json(chartData, JsonRequestBehavior.AllowGet);
    }

    //
    // GET: /jqPlot/

    public ActionResult Index()
    {
        return View();
    }
}

:

public class jqplotModel
{
 public string Date { get; set; }
 public double Demand { get; set; }
 public double Supply { get; set; }
}

ChartDataJSON (!) . .

jqPlot, , , DateTime javascript. , jqPlot . , , , , jqPlot , . '2008-09-30 4:00 PM' (. ) - , , jqPlot !

:

<script src="@Url.Content("Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/jquery.jqplot.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.barRenderer.min.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.dateAxisRenderer.min.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.pointLabels.min.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.canvasAxisTickRenderer.min.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.highlighter.min.js")"  type="text/javascript"></script>


<script type="text/javascript">
    $(document).ready(function () {
        // The url for our json data
        var url = '@Url.Action("ChartDataJSON", "jqPlot")';

        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;
            }
        });

        var demands = [];
        var supplys = [];

        for (i = 0; i < ret.length; i++) {
            // Save the data to the relevant array. Note how date at the zeroth position (i.e. x-axis) is common for both demand and supply arrays.
            demands.push([ret[i].Date, ret[i].Demand]);
            supplys.push([ret[i].Date, ret[i].Supply]);
        }

        var plot1 = $.jqplot('chart1', [demands, supplys], {
            title: "Demand Supply",
            axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickOptions: {
                        formatString: '%d/%m/%Y'
                    },

                    label: 'Date'
                },
                yaxis: {
                    label: 'Demand'
                },
                y2axis: {
                    label: 'Supply'
                }
            },
            series: [
                { yaxis: 'yaxis', label: 'demands' },
                { yaxis: 'y2axis', label: 'supplys' }
            ],
            highlighter: {
                show: true,
                sizeAdjust: 1
            },
            cursor: {
                show: false
            }
        });
    });
</script>

@{
    ViewBag.Title = "jQPlot Demo";
}

<h2>@ViewBag.Title</h2>
<div id="chart1" style="height: 400px; width: 600px;"></div>

, datarender. jQuery ajax call, Demand and Supply. x, y (, , , ).

, jqPlot, :

Graph produced when code is run

- , , , , . , , , , , .

+3

, : JsFiddle

  • rawData , jj-ajaxreply json. .

  • , , dataRenderer, . . DataRenderer

    $(document).ready(function () {

    var rawData = [{ "" : 4422.45, "" : 17660, "" : "/ (1236504600000)/", "DateString" : "3 PM" }, { "" : 5019.27, "" : 20699, "" : "/ (1236508200000)/", "DateString" : "4 PM" }, { "" : 5030,35, "" : 19917, "" : "/ () 1236511800000)/", "DateString" : "5 PM" }, { "" : 5172,35, "" : 23597, "" : "/ (1236515400000)/", "DateString" : "6 PM" }, { "" : 5656,51, "" : 21572, "" : "/ (1236519000000)/", "DateString" : "7 PM" }, { "" : 4622,88, "": 7794, "" : "/ (1236522600000)/", "DateString" : "8 PM" }, { "" : 3116.21, "" : 3427, "" : "/ (1236526200000)/", DateString ":" 9 PM "}, { "" : 1588.83, "" : 1883, "" :"/ (1236529800000)/", "DateString" :" 10 PM "}, { "" : 1394.15 "" : 1403, "" : "/ (1236533400000)/", "DateString" : "11 PM"}, { "" : 1321,76, "" : 3755, "" : "/ (1236537000000)/", "DateString" :" 12 AM "}, {" Demand ": 1130.98," Supply ": 3474," Date ":" /Date (1236540600000)/", "DateString" :" 1 AM "}, { "" : 1277,1, "" : 1072, "" :"/ (12365 44200000)/", "DateString" :" 2 AM "}, {" Demand ": 1214.68," Supply ": 1025," Date ":" /Date (1236547800000)/", "DateString" :" 3 AM "}, { "" : 2117,91, "" : 1198, "" : "/ (1236551400000)/", "DateString" : "4 AM"}, { "" : 1658,97, "" : 1485, "" : "/ (1236555000000)/", "DateString" : "5 AM"}, { "" : 1997.36, "" : 3126, "" : "/ (1236558600000)/", DateString ":" 6 AM "}, { "" : 2147.37, "" : 4785, "" : "/ (1236562200000)/", "DateString" : "7 AM" }, { "" : 2114.13, "" : 5268, "" : "/ (1236565800000)/", "DateString" : "8 AM" }, { "" : 2389.84, "" : 5264, "" : "/ (1236569400000)/", "DateString" :" 9 AM "}, {" Demand ": 2240.77, "Supply": 5526," Date ":" /Date (1236573000000)/", "DateString" : "10 AM" }, { "" : 1802.43, "" : 4530, "" : "/ (1236576600000)/", "DateString" : "11 AM" }, { "" : 1929.71, "" : 6618, "" : "/ (1236580200000)/", "DateString" : "12 PM" }, { "" : 545,65, "" : 2767, "" : "/ (1236583800000)/", "DateString" : "1 PM" }, { "" : 0, "" : 1, "" : "/ (1236) 587400000)/", "DateString" : "2 PM" }];

        var types = ['Demand', 'Supply'];               

    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 Hr'
            },
            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();
        }
    });

});
+1

@user1254053 @Fresh. js- ChartDataJSON, ChartDataJSON(), , .

, , , return(View) .

, , , .

0

More articles:


All Articles