Populate (Bind) jQuery Flot stacked bar Chart in ASP.Net MVC

Last Reply 22 days ago By dharmendr

Posted 23 days ago

Hi,

Display (Show) value in Bar using jQuery Flot stacked bar Chart

I want the data to be from database using entity framework LINQ in MVC

database table stcture

ID    LABLESNAMES DATAVAL   XAXISVAL XAXISNAMES
1     FOO 300 1.1 One
2 BAR 145 2.1 Two
3 BAZ 365 3.1 Three
4 FOO 0 1.1 One
5 BAR 0 2.1 Two
6 BAZ 200 3.1 Three
7 FOO 300 1.1 One
8 BAR 152 2.1 Two
9 BAZ 0 3.1 Three
Posted 22 days ago Modified on 22 days ago

Hi Rockstar8,

Check this example. Now please take its reference and correct your code.

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetChartData()
    {
        List<Data> dt = GetSampleData();
        object[] labels = dt.Select(x => x.LABLESNAMES).Distinct().ToArray();

        string message = "[";
        string axis = "[";
        for (int i = 0; i < labels.Length; i++)
        {
            message += "{'label':'" + labels[i] + "','data':[";
            var d = dt.Where(x => x.LABLESNAMES == labels[i].ToString())
                .Select(x => new { axisValue = x.XAXISVAL, dataValue = x.DATAVAL, axisName = x.XAXISNAMES });
            foreach (var item in d)
            {
                message += "[" + item.axisValue + "," + item.dataValue + "],";
                if (i == 0)
                {
                    axis += "[" + item.axisValue + ",'" + item.axisName + "'],";
                }
            }
            message = message.Substring(0, message.Length - 1) + "]},";
        }
        message = message.Substring(0, message.Length - 1);
        message += "]";

        axis = axis.Substring(0, axis.Length - 1);
        axis += "]";

        ChartData chart = new ChartData();
        chart.data = message;
        chart.xaxisTicks = axis;
        return Json(chart, JsonRequestBehavior.AllowGet);
    }

    public class ChartData
    {
        public string data { get; set; }
        public string xaxisTicks { get; set; }
    }

    private static List<Data> GetSampleData()
    {
        List<Data> dt = new List<Data>();
        dt.Add(new Data { ID = 1, LABLESNAMES = "FOO", DATAVAL = 300, XAXISVAL = 1.1, XAXISNAMES = "One" });
        dt.Add(new Data { ID = 2, LABLESNAMES = "BAR", DATAVAL = 145, XAXISVAL = 1.1, XAXISNAMES = "One" });
        dt.Add(new Data { ID = 3, LABLESNAMES = "BAZ", DATAVAL = 365, XAXISVAL = 1.1, XAXISNAMES = "One" });
        dt.Add(new Data { ID = 4, LABLESNAMES = "FOO", DATAVAL = 0, XAXISVAL = 2.1, XAXISNAMES = "Two" });
        dt.Add(new Data { ID = 5, LABLESNAMES = "BAR", DATAVAL = 0, XAXISVAL = 2.1, XAXISNAMES = "Two" });
        dt.Add(new Data { ID = 6, LABLESNAMES = "BAZ", DATAVAL = 200, XAXISVAL = 2.1, XAXISNAMES = "Two" });
        dt.Add(new Data { ID = 7, LABLESNAMES = "FOO", DATAVAL = 300, XAXISVAL = 3.1, XAXISNAMES = "Three" });
        dt.Add(new Data { ID = 8, LABLESNAMES = "BAR", DATAVAL = 152, XAXISVAL = 3.1, XAXISNAMES = "Three" });
        dt.Add(new Data { ID = 9, LABLESNAMES = "BAZ", DATAVAL = 0, XAXISVAL = 3.1, XAXISNAMES = "Three" });
        return dt;
    }

    public class Data
    {
        public int ID { get; set; }
        public string LABLESNAMES { get; set; }
        public int DATAVAL { get; set; }
        public double XAXISVAL { get; set; }
        public string XAXISNAMES { get; set; }
    }
}

View

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.stack.js"></script>
<script src="../../Scripts/jquery.flot.barnumbers.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            type: "GET",
            url: "/Home/GetChartData",
            data: {},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var options = {
                    series: {
                        stack: 0,
                        lines: { show: false, steps: false },
                        bars: {
                            // horizontal: true,
                            show: true,
                            barWidth: 0.9,
                            align: 'left',
                            numbers: { show: true }
                        }
                    },
                    xaxis: { ticks: eval(r.xaxisTicks) }
                };

                $.plot($('#placeholder'), eval(r.data), options);
            }
        });
    });
</script>
<div id="placeholder" style="width: 400px; height: 300px;">
</div>

Screenshot