Use SQL data for flot chart with C# and ASP
Use SQL data for flot chart with C# and ASP
我是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数据,就很难理解错误可能在哪里,但由于您使用的是日期,这一定是其中之一。
相关文章:
- timeago.js with datatable and PHP
- Ajax and Json with Rails
- Upload with angularjs and rails 4
- geolocation with javascript and ruby on rails
- working with sammyjs typescript and systemjs
- chartJs with MySQL and PHP
- Selenium with C# and Javascript
- Trouble with replace() and § JavaScript
- jQuery if and else with filter
- Xpath with js and google chrome
- Bootstrap Contact Form with jQuery Validation and AJAX
- onClientClick with JavaScript function and eval
- injectJs with PhantomJs and CasperJs
- Nodemailer with Gmail and NodeJS
- Cross domain ajax with jsonP and codeigniter
- JSON and AJAX with Python
- Javascript If Condition with multiple OR and AND
- Ace Editor and Dojo 1.9 with AMD
- javascript google map setcenter and setzoom with animation
- calculation with && and OR