Implement BootStrap Charts from database using jQuery AJAX in ASP.Net

Here I have created sample that will help you out. I have used Manually created Datatable to bind, you can bind it from Database DataTable.

HTML

<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="JS/jquery.flot.js" type="text/javascript"></script>
    <script src="JS/jquery.flot.stack.js" type="text/javascript"></script>
    <script type="text/javascript" id="source">
        $(function () {
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetData",
                contentType: "application/json; charset=utf-8",
                data: {},
                dataType: "json",
                success: function (response) {
                    var xmlDoc = $.parseXML(response.d);
                    var xml = $(xmlDoc);
                    var datas = xml.find("Data");
                    var d1 = [];
                    var d2 = [];
                    var count = 0;
                    $(datas).each(function () {
                        d1.push([count, $(this).find("d1").text()]);
                        d2.push([count, $(this).find("d2").text()]);
                        count++;
                    });
                    var stack = 0, bars = true, lines = false, steps = false;
                    function plotWithOptions() {
                        $.plot($("#placeholder"), [d1, d2], {
                            series: {
                                stack: stack,
                                lines: { show: lines, fill: true, steps: steps },
                                bars: { show: bars, barWidth: 0.6 }
                            }
                        });
                    }
                    plotWithOptions();
                    $(".stackControls input").click(function (e) {
                        e.preventDefault();
                        stack = $(this).val() == "With stacking" ? true : null;
                        plotWithOptions();
                    });
                    $(".graphControls input").click(function (e) {
                        e.preventDefault();
                        bars = $(this).val().indexOf("Bars") != -1;
                        lines = $(this).val().indexOf("Lines") != -1;
                        steps = $(this).val().indexOf("steps") != -1;
                        plotWithOptions();
                    });
                },
                error: function (xhr, status) {
                    alert("An error occurred: " + status);
                }
            });
        });
    </script>
    <div>
        <div id="placeholder" style="width: 600px; height: 300px;">
        </div>
    </div>
    <p class="stackControls">
        <input type="button" value="With stacking">
        <input type="button" value="Without stacking">
    </p>
    <p class="graphControls">
        <input type="button" value="Bars">
        <input type="button" value="Lines">
        <input type="button" value="Lines with steps">
    </p>
</div>

Code

[WebMethod]
public static string GetData()
{
    Random rnd = new Random();
    DataTable dt = new DataTable("Data");
    dt.Columns.Add("d1", typeof(int));
    dt.Columns.Add("d2", typeof(int));
    dt.Rows.Add(rnd.Next(50), rnd.Next(50));
    dt.Rows.Add(rnd.Next(50), rnd.Next(50));
    dt.Rows.Add(rnd.Next(50), rnd.Next(50));
    dt.Rows.Add(rnd.Next(50), rnd.Next(50));
    dt.Rows.Add(rnd.Next(50), rnd.Next(50));
    dt.Rows.Add(rnd.Next(50), rnd.Next(50));
    dt.Rows.Add(rnd.Next(50), rnd.Next(50));
    dt.Rows.Add(rnd.Next(50), rnd.Next(50));
    dt.Rows.Add(rnd.Next(50), rnd.Next(50));
    dt.Rows.Add(rnd.Next(50), rnd.Next(50));
    DataSet ds = new DataSet();
    ds.Tables.Add(dt);
    return ds.GetXml();
}

Screenshot