Use SQL data for flot chart with C# and ASP

Use SQL data for flot chart with C# and ASP

本文关键字:with and ASP chart flot SQL data for Use      更新时间:2023-09-26

我是flot charts的新手,与其说我是C#程序员,不如说我是SQL程序员。我正试图用条形图来反映每月的销售额。我似乎无法将数据输入图表。我一直在寻找一个直接的答案,让它发挥作用,但4天后却没有运气。以下是存储过程返回的内容:

MonthID SoldCount   MonthName
4        101         Apr
8        118         Aug
2        74          Feb
1        74          Jan
7        113         Jul
6        126         Jun
3        114         Mar
5        129         May
9         47         Sep

这是后面的代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Text;
using System.Configuration;
using SkywebReporter.Classes;
namespace SkywebReporter
{
    public partial class DefaultObject : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {         
        }
        string conn = ConfigurationManager.ConnectionStrings["sqlConn"].ConnectionString;
        [System.Web.Services.WebMethod]//public static web method in code behind
        public static List<PNMACsales> GetData() //int StartRowindex, 
        {
            List<PNMACsales> myResult = new List<PNMACsales>();
            using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["sqlConn"].ConnectionString))
            {
                //string sqlString = "SelectbyYearTotalProductAssign";
                string sqlString = "PNMAC.procReportSalesCounts";
                using (SqlCommand cmd = new SqlCommand(sqlString, conn))
                {
                    cmd.CommandType = System.Data.CommandType.StoredProcedure;
                    conn.Open();
                    SqlDataReader rdr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
                    while (rdr.Read())
                    {
                        PNMACsales obj = new PNMACsales();
                        obj.SoldCount = Convert.ToInt32(rdr["SoldCount"]);
                        obj.MonthName = rdr["MonthName"].ToString();
                        myResult.Add(obj);
                    }
                    conn.Close();
                }
            } 
            return myResult;             
        }      
    }
}

这是我的JS文件Dashboard.JS

function DrowChart() {
    jQuery("#placeholder").html('');
    var list12 = [];
    jQuery.ajax({
        type: "POST",
        url: "DefaultObject.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.MonthName + "'");
                list.push(item.SoldCount);
                list12.push(list);
            });
            var plot1 = jQuery.jqplot('chart1', [list12],
                                     );
        }
    });
}

假设您成功地从GetData()方法获得了响应,则需要序列化从GetData()函数返回的List。这是因为JavaScript对C#列表无能为力。它需要转换为JS可以识别的字符串格式(JSON)。

正如一些评论所建议的那样,将JSON.Net添加到C#项目中是一种简单的方法。

一旦安装了JSON.Net,就可以将GetData()的返回类型更改为字符串,并执行以下操作:

return JsonConvert.SerializeObject(myResult);

在JavaScript中,您需要解析序列化列表:

var list = JSON.parse(data);

该列表应该被解析为一个对象数组,然后您可以按照需要的格式将其传递到flot中。

在FlotChart中处理日期时,您希望返回UNIX时间戳中的日期乘以1000,方法是使用此ASP代码过滤返回到FlotChart:的日期

DateDiff("s","01/01/1970",MyDate)*1000

这让FlotChart可以随心所欲地使用它,因此您可以使用它提供的所有日期功能。当你这样做时,它会为你写下日期和月份名称等。

如果没有看到流程图中的JSON数据,就很难理解错误可能在哪里,但由于您使用的是日期,这一定是其中之一。