How to pass ms sql data to jquery float

Question

I am developing a web application using asp.net c# and using MS SQL as database. In my application I want to plot a graph of mothly sales . For doing that I found very nice jquery plugin called flot .

But the problem is that I dont know how to pass my sql data to flot . I've a table which has two columns date (DateTime) and number of sales (int). I want the number of sales on y axis and date on x axis.

I googled alot around the web, but I didn't find much help about how to pass MS SQL data to flot.

Please any one can help me to do so.

Thanks in advance.

Answer 1

here is demo code

in code behind

    public class chartdata
    {
        public string Date { get; set; }
        public int Sales { get; set; }
    }
    [System.Web.Services.WebMethod]//public static web method in code behind
    public static List<chartdata> GetData() //int StartRowindex, 
    {

        List<chartdata> myResult= new List<chartdata>();
        using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["demo"].ConnectionString))
        {
            //string sqlString = "SelectbyYearTotalProductAssign";
            string sqlString = "SelectbyYearTotalProductAssign1";
            using (SqlCommand cmd = new SqlCommand(sqlString, conn))
            {
                cmd.CommandType = System.Data.CommandType.StoredProcedure;
                conn.Open();
                SqlDataReader rdr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
                while (rdr.Read())
                {
                    chartdata obj = new chartdata();
                    obj.Sales = Convert.ToInt32(rdr["Sales"]);
                    obj.Date = rdr["Date"].ToString();
                    myResult.Add(obj);
                }
                conn.Close();
            }
        }

        return myResult;
    }

your html

<div id="chart1"></div>
 <script language="javascript" type="text/javascript">
     jQuery(document).ready(function () {
         DrowChart();
     });

     function DrowChart() {
         jQuery("#chart1").html('');
         var list12 = [];
         jQuery.ajax({
             type: "POST",
             url: "Default.aspx/GetData",
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             async: false,
             data: "{}",
             success: function (data) {
                 jQuery.map(data.d, function (item) {
                     var list = [];
                     list.push("'" + item.Date + "'");
                     list.push(item.Sales);
                     list12.push(list);
                 });
                 var plot1 = jQuery.jqplot('chart1', [list12],
                                            {
                                                seriesDefaults: {
                                                    // Make this a pie chart.
                                                    renderer: jQuery.jqplot.PieRenderer,
                                                    rendererOptions: {
                                                        // Put data labels on the pie slices.
                                                        // By default, labels show the percentage of the slice.
                                                        showDataLabels: true
                                                    }
                                                },
                                                legend: { show: true, location: 'e' }
                                            }
                                          );


             }
         });
     }


</script>
<script type="text/javascript" src="chartLib/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="chartLib/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="chartLib/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="chartLib/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="chartLib/plugins/jqplot.pointLabels.min.js"></script>
<link rel="stylesheet" type="text/css" href="chartLib/jquery.jqplot.min.css" />

Answer 2

You could use a jQuery Ajax call to get your flot data from server-side in JSON format. If successful then parse the JSON object and call $.plot using your placeholder div, the parsed JSON result, and any options.