highchart的数据加载以及实时刷新

 //根据区域查询到该区域当日各项指标的值，用于实时数据展示界面的曲线展示
        public DataSet GetDataByNodeId(int nodeId,string  start,string end)
        {
            DataSet ds = new DataSet();
            StringBuilder strSql = new StringBuilder();
            strSql.Append(" select node_name,data_record,data_time,node_unit from Iot_data ");
            strSql.Append(" left join Iot_node on Iot_node.node_id=Iot_data.data_node_id ");
            strSql.Append(" where Iot_node.node_id = " + nodeId);
            if (!string.IsNullOrEmpty(start) && !string.IsNullOrEmpty(end))
            {
                strSql.Append(" and data_time between '" + Convert.ToDateTime(start) + "' and '" + Convert.ToDateTime(end) + "' ");
            }
            else
            {
                strSql.Append(" and datediff(dd,data_time,getdate())=0 ");
            }
            //strSql.Append(" and data_time between dateadd(hh,-1,getDate()) and getDate() ");
            strSql.Append(" order by data_time ");
            return DbHelperSQL.Query(strSql.ToString());

        }

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace Iot.Dal
{
    public class Iot_chart_sv
    {
        private string textName;
        /// <summary>
        /// 表名
        /// </summary>
        public string TextName
        {
            get { return textName; }
            set { textName = value; }
        }
        private string unitName;
        /// <summary>
        /// 单位
        /// </summary>
        public string UnitName
        {
            get { return unitName; }
            set { unitName = value; }
        }
        private string value;
        /// <summary>
        /// Serizes数据值
        /// </summary>
        public string Value
        {
            get { return this.value; }
            set { this.value = value; }
        }
        private string data;
        /// <summary>
        /// 存放某一区域某一功能下data的数组字符串，用于刷新曲线
        /// </summary>
        public string Data
        {
            get { return data; }
            set { data = value; }
        }

        private List<string> serviceData;


        public Iot_chart_sv()
        {
            serviceData = new List<string>();
        }

        public void CreateData(IDictionary<string,object> items)
        {
            if (items.Count > 0)
            {
                List<string> _list = new List<string>();
                foreach (KeyValuePair<string, object> item in items)
                {
                    Type ss = item.Value.GetType();
                    if (item.Value.GetType() == typeof(string))
                    {
                        _list.Add(string.Format("{0}:'{1}'", item.Key, item.Value.ToString()));  
                    }
                    else if (item.Value.GetType() == typeof(string[]))
                    {
                        string[] _dd = (string[])item.Value;
                        string datavalue="[" + string.Join(",", _dd) + "]";
                        Data += "|" + datavalue;//获取一条数据Data
                        _list.Add(string.Format("{0}:{1}", item.Key, datavalue));
                    }
                }
                serviceData.Add("{" + string.Join(",", _list.ToArray()) + "}");
            }
        }

        public string CreateSerize()
        {
            if (serviceData.Count > 0)
            {
                Data = Data.Substring(1, Data.Length - 1);
                return "[" + string.Join(",", serviceData.ToArray<string>()) + "]";
            }
            else
                return string.Empty;                     
        }

        //组合标题
        public void GetTextName(string textname)
        {
            TextName = "'" + textname + "'";
        }
        //组合单位
        public void GetUnitName(string unitname)
        {
            UnitName = "'" + unitname + "'";
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Iot.Dal;
using System.Data;

namespace Iot.Monitor
{
    public class ChartMv
    {
        NodeMv nodemv = new NodeMv();
        DataMv datamv = new DataMv();
        Iot_chart_sv chart = new Iot_chart_sv();
        public Iot_chart_sv getChart(int areaId, int funId, string start, string end)
        {
            chart.Value = "";
            chart.TextName = "";
            chart.UnitName = "";
            chart.Data = "";
            DataSet dsNum = nodemv.GetNodeByAreaFunId(areaId, funId);
            if (dsNum.Tables[0].Rows.Count > 0)
            {
                //获得标题
                chart.GetTextName(nodemv.GetFuncByid(funId));
                //获得查询出的第一个node单位
                chart.GetUnitName(dsNum.Tables[0].Rows[0]["node_unit"].ToString());
                for (int i = 0; i < dsNum.Tables[0].Rows.Count; i++)
                {
                    int nodeId = Convert.ToInt32(dsNum.Tables[0].Rows[i]["node_id"]);
                    DataSet dsData = datamv.GetDataByNodeId(nodeId, start, end);
                    string nodeName = "";
                    List<string> data = new List<string>();
                    IDictionary<string, object> serize = new Dictionary<string, object>();
                    for (int j = 0; j < dsData.Tables[0].Rows.Count; j++)
                    {
                        if (j == 0)
                        {
                            nodeName = dsData.Tables[0].Rows[j]["node_name"].ToString();
                        }
                        //显示的时间比实际时间多一个月，所以显示时，需要将实际月份减去1
                        string time = Convert.ToDateTime(dsData.Tables[0].Rows[j]["data_time"]).AddMonths(-1).ToString("yyyy,MM,dd,HH,mm,ss");
                        string record = dsData.Tables[0].Rows[j]["data_record"].ToString();
                        //创建一条数据Data项
                        data.Add("[Date.UTC(" + time + ")," + record + "]");
                    }
                    serize.Add("name", nodeName);
                    serize.Add("data", data.ToArray());
                    //组合一条serize
                    chart.CreateData(serize);
                }
                //组合所有serize
                chart.Value = chart.CreateSerize();
            }
            return chart;
        }
    }
}

        <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/highcharts.js" type="text/javascript"></script>
    <script src="js/exporting.js" type="text/javascript"></script>
<script type="text/javascript">


$(function () {
       window.chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'spline',
                marginRight: 130,
                marginBottom: 25,
                zoomType: 'x'//拖动可放大X轴
            },
            title: {
                text: <%= textName %>,
                x: -20 //center
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: { // don't display the dummy year
                }
            },            
            
            yAxis: {
                title: {
                    text: '单位('+<%= unitName %>+')'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
               formatter: function() {
                  return '<strong>'+ this.series.name +'</strong>' +': '+ this.y +<%= unitName %>+'<br/>'+
                     Highcharts.dateFormat('%Y年%m月%d日 %H:%M:%S', this.x);
               }
            },            
           
            plotOptions: {
                spline: {
                    lineWidth: 2,
                    states: {
                        hover: {
                            lineWidth: 2
                        }
                    },
                    marker: {
                        enabled: false
                    }
                }
            },           
            
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: <%= returnValue %>
        });
  


        function getForm(){  
                                                //使用JQuery从后台获取JSON格式的数据  
         var areaId=document.getElementById("ctl00_ContentPlaceHolder1_ddlArea").value;
         var funId=document.getElementById("ctl00_ContentPlaceHolder1_ddlFun").value;
         var start=document.getElementById("ctl00_ContentPlaceHolder1_txtStart").value;
         var end=document.getElementById("ctl00_ContentPlaceHolder1_txtEnd").value;
         postData = "action=history&areaId="+areaId+"&funId="+funId+"&start="+start+"&end="+end;
         $.ajax({
           type: "POST",
           url: "chart.ashx",
           data: postData,
           success: function(data){
              var series=chart.series; 
              var sdata=data.split("|");
              for(var i=0;i<series.length;i++)
              {
                  //string格式必须转化为json格式，必须使用eval(string)方法
                  chart.series[i].setData(eval(sdata[i]));
              }
              chart.redraw();


           },
           error:function(msg)
           {
                alert("通信错误!");
           }
        });


        }  
  
      
        $(document).ready(function() {  
            //每隔1秒自动调用方法，实现图表的实时更新  
            window.setInterval(getForm,1000);   
              
        }); 

  });

</script>

<div id="container" style="width: 734px; height: 430px; margin: 0 auto"></div>

        //绑定曲线图
        private void BindCharts()
        {
            int areaId = Convert.ToInt32(ddlArea.SelectedValue);
            int funId = Convert.ToInt32(ddlFun.SelectedValue);
            string start = txtStart.Value.Trim().ToString();
            string end = txtEnd.Value.Trim().ToString();
            ChartMv chartmv = new ChartMv();
            Iot_chart_sv chart = chartmv.getChart(areaId, funId, start, end);
            returnValue = chart.Value;
            textName = chart.TextName;
            unitName = chart.UnitName;
            if (string.IsNullOrEmpty(chart.TextName))
                Public.showMsg("该区域功能下无节点信息！", this);

        }

using System;
using System.Collections;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using Iot.Monitor;
using Iot.Dal;

namespace Iot.Web
{
    /// <summary>
    /// $codebehindclassname$ 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class chart : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string action = context.Request["action"];
            if (action == "history" || action == "current")
            {
                int areaId = Convert.ToInt32(context.Request["areaId"]);
                int funId = Convert.ToInt32(context.Request["funId"]);
                string  start="";
                string  end="";
                if (action == "history")
                {
                    start = context.Request["start"].ToString();
                    end = context.Request["end"].ToString();
                }
                ChartMv chartmv = new ChartMv();
                Iot_chart_sv chart = chartmv.getChart(areaId, funId, start, end);
                context.Response.Write(chart.Data);
            }

        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}