Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
200
How to show Sparkline chart in Grid through JSON from controller class
posted

Here is my code for Model Class:

 public class GridModel
    {
        public double ID { get; set; }
        public string SHORT_NAME { get; set; }
        public string CARRIER_NAME { get; set; }
        public List<GridSparklineModel> SellDuration { get; set; }
    }

    public class GridSparklineModel
    {
        public DateTime YMDH { get; set; }
        public double SELL_DURATION { get; set; }
        public string DateString { get { return YMDH.ToString("h tt"); } }
    } 

---------------------------------------

public class GridController : Controller
    {
        //
        // GET: /Grid/

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

        public class JsonNetActionResult : ActionResult
        {
            public Object Data { get; private set; }

            public JsonNetActionResult(Object data)
            {
                this.Data = data;
            }

            public override void ExecuteResult(ControllerContext context)
            {
                context.HttpContext.Response.ContentType = "application/json";
                context.HttpContext.Response.Write(JsonConvert.SerializeObject(Data));
            }
        }

        public JsonNetActionResult FetchGraphDataJSON()
        {
            List<GridModel> data = new List<GridModel>();

            //DataFetching Logic
            DataTable dt = FetchFirstDataTable();

            if (dt.Rows.Count != 0)
            {
                foreach (DataRow row in dt.Rows)
                {
                    GridModel model = new GridModel();

                    model.ID = Convert.ToDouble(row["ID"].ToString());
                    model.SHORT_NAME = row["SHORT_NAME"].ToString();
                    model.CARRIER_NAME = row["CARRIER_NAME"].ToString();

                    model.SellDuration = new List<GridSparklineModel>();

                    double carrierId = Convert.ToDouble(row["ID"].ToString());

                    DataTable dt2 = GetDt2();

                    foreach (DataRow item2 in dt2.Select("ID=" + carrierId))
                    {
                        model.SellDuration.Add(new GridSparklineModel { YMDH = DateTime.Parse(item2["YMDH"].ToString()), SELL_DURATION = Convert.ToDouble(item2["SELL_DURATION"]) });
                    }

                    data.Add(model);
                }
            }

            return new JsonNetActionResult(data);
        }

        public DataTable FetchFirstDataTable()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("ID", typeof(double));
            dt.Columns.Add("SHORT_NAME");
            dt.Columns.Add("CARRIER_NAME");

            dt.Rows.Add(1, "A", "Carrier A");
            dt.Rows.Add(2, "B", "Carrier B");
            dt.Rows.Add(3, "C", "Carrier C");
            dt.Rows.Add(4, "D", "Carrier D");
            dt.Rows.Add(5, "E", "Carrier E");
            dt.Rows.Add(6, "F", "Carrier F");
            dt.Rows.Add(7, "G", "Carrier G");
            return dt;
        }

        public DataTable GetDt2()
        {
            DataTable dt = new DataTable();

            dt.Columns.Add("YMDH");
            dt.Columns.Add("ID", typeof(double));
            dt.Columns.Add("SELL_DURATION");

            dt.Rows.Add("2009-03-07 00:00:00.000", 1, 222.999995);
            dt.Rows.Add("2009-03-07 01:00:00.000", 1, 75.816664);
            dt.Rows.Add("2009-03-07 02:00:00.000", 1, 39.349995);
            dt.Rows.Add("2009-03-07 03:00:00.000", 1, 275.91666);
            dt.Rows.Add("2009-03-07 04:00:00.000", 1, 352.666641);
            dt.Rows.Add("2009-03-07 00:00:00.000", 2, 80.783324);
            dt.Rows.Add("2009-03-07 01:00:00.000", 2, 162.049985);
            dt.Rows.Add("2009-03-07 02:00:00.000", 2, 107.199989);
            dt.Rows.Add("2009-03-07 03:00:00.000", 2, 44.849994);
            dt.Rows.Add("2009-03-07 04:00:00.000", 2, 156.516658);
            dt.Rows.Add("2009-03-07 05:00:00.000", 2, 467.583312);
            dt.Rows.Add("2009-03-07 06:00:00.000", 2, 455.199977);

            return dt;
        }

    }

-----------------------------------------

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI Required Combined CSS Files -->
    <link href="../igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="../igniteui/css/structure/infragistics.css" rel="stylesheet" />

    <script src="../js/modernizr.min.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/jquery-ui.min.js"></script>

    <!-- Ignite UI Required Combined JavaScript Files -->
    <script src="../igniteui/js/infragistics.core.js"></script>
    <script src="../igniteui/js/infragistics.dv.js"></script>
    <script src="../igniteui/js/infragistics.lob.js"></script>

</head>
<body>

     <!-- Target element for the igGrid -->   
    <table id="grid"></table>
    
    <script>
        $(document).ready(function () {
            var url = '@Url.Action("FetchGraphDataJSON", "Grid")';

            var rawData = 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) {
                    rawData = data;
                }
            });

            var plotData = []

            for (i = 0; i < rawData.length; i++) {               
                plotData.push([rawData[i].ID, rawData[i].SHORT_NAME, rawData[i].CARRIER_NAME], [rawData[i].SellDuration]);
            }


            $(function () {

                $("#grid").igGrid({
                    dataSource: plotData,
                    autoGenerateColumns: false,
                    height: "400px",
                    rowsRendered: function (evt, ui) {
                        //get data collection
                        var dataSource = ui.owner.dataSource;
                        $(".order-sparkline").each(function (i) {
                            $(this).igSparkline({
                                dataSource: dataSource.findRecordByKey(
                                     $(this).data("ID")).SellDuration,
                                height: "24px",
                                width: "100%",
                                valueMemberPath: 'SELL_DURATION'
                            })
                            .css("background-color", "transparent");
                        });
                    },
                    primaryKey: "ID",
                    rowTemplate: "<tr><td></td><td>${ID}</td><td>${SHORT_NAME}</td>" +
                        "<td>${CARRIER_NAME}</td><td><div data-id='${ID}' class='order-sparkline'></div></td></tr>",
                    columns: [
                        { key: "ID", hidden: true },
                        { key: "SHORT_NAME", headerText: "Short Name" },
                        { key: "CARRIER_NAME", headerText: "Name" },                        
                        { key: "SellDuration", headerText: "Duration" }
                    ]
                });

            });
        });

    </script>

</body>
</html>

I can see the Grid with 3 columns and last column for Sparkline is not shown. Can anybody please suggest what should be done to show the sparkline in grid.