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

Last Reply 2 months ago By dharmendr

Posted 2 months 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 2 months ago Modified on 2 months 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