How to implement line chart with jQuery_jquery

The example in this article describes how to implement a line chart with jQuery. Share it with everyone for your reference. The details are as follows:

The rendering is as follows:

js reference:

Copy code The code is as follows:

Refresh regularly:

Copy code The code is as follows:

//Graph
ar chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
Renderto: 'Divchart', // Place the container of the chart
plotBackgroundColor: null,
plotBorderWidth: null,
                    defaultSeriesType: 'line'
          },
title: {
                  text: '24-hour load curve'
          },
          subtitle: {                                                  text: ''
          },
            xAxis: {//X-axis data
categories: ['00','01', '02','03', '04','05', '06','07', '08','09', '10','11' , '12','13', '14','15', '16','17', '18','19', '20','21', '22','23'],

labels: {
                  rotation: -45, //Font tilt
align: 'right',
style: { font: 'normal 12px 宋体' }
                                                                                                              },
        yAxis: {//Y-axis display text
title: {
                                text: 'MW'                                                                                                                                                 },
tooltip: {
                                                         enabled: true, Formatter: function() {
                       return '' this.x '
' this.series.name ': ' Highcharts.numberFormat(this.y, 1);
                                                                                                              },
plotOptions: {
Line: {
dataLabels: {
                                           enabled: true                                                                                                                                   EnableMouSetracking: True // Whether Title
                                                                                                              },
series: [{
                name: 'Unit 1',
data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 ]
          },{ 
name: 'Unit 2',
data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 ]
         }] 
         }); 
         function getForm(){  
             $.ajax({ 
                 type: "POST",     //要用post方式      
                 url: "WebServiceFH.asmx/GetLoadEveryHourByOne",        
                 contentType: "application/json", 
                 data: {}, 
                 dataType: "json", 
                 success: function (data) {   
                     var data = [data["Load0"],data["Load1"],data["Load2"],data["Load3"],data["Load4"],data["Load5"],data["Load6"],data["Load7"],data["Load8"],data["Load9"],data["Load10"],data["Load11"],data["Load12"],data["Load13"],data["Load14"],data["Load15"],data["Load16"],data["Load17"],data["Load18"],data["Load19"],data["Load20"],data["Load21"],data["Load22"],data["Load23"]];  
                     chart.series[0].setData(data);  
                 }, 
                 error: function (err) {  
                     alert("读取数据出错！"); 
                 } 
             });   
             $.ajax({ 
                 type: "POST",     //要用post方式      
                 url: "WebServiceFH.asmx/GetLoadEveryHourByTwo",        
                 contentType: "application/json",  
                 dataType: "json", 
                 success: function (data) {   
                     var data = [data["Load0"],data["Load1"],data["Load2"],data["Load3"],data["Load4"],data["Load5"],data["Load6"],data["Load7"],data["Load8"],data["Load9"],data["Load10"],data["Load11"],data["Load12"],data["Load13"],data["Load14"],data["Load15"],data["Load16"],data["Load17"],data["Load18"],data["Load19"],data["Load20"],data["Load21"],data["Load22"],data["Load23"]];  
                     chart.series[1].setData(data);    
                 }, 
                 error: function (err) {  
                     alert("读取数据出错！"); 
                 } 
             });  
         } 
         $(document).ready(function() {   
                           // Automatically call the method every 3 seconds to realize real-time update of the chart
                         getForm();                                                                   window.setInterval(getForm,600000);                                          }); 
});

Note here:

Copy code The code is as follows:var data = [data["Load0"],data["Load1"], data["Load2"],data["Load3"],data["Load4"],data["Load5"],data["Load6"],data["Load7"],data["Load8"],data ["Load9"],data["Load10"],data["Load11"],data["Load12"],data["Load13"],data["Load14"],data["Load15"],data[ "Load16"],data["Load17"],data["Load18"],data["Load19"],data["Load20"],data["Load21"],data["Load22"],data[" Load23"]];

chart.series[0].setData(data);

Only required in body:

Copy code The code is as follows:

I hope this article will be helpful to everyone’s jQuery programming.