This article illustrates the method of implementing the line chart with jquery. Share to everyone for your reference. Specifically as follows:
The effect diagram looks like this:
JS Reference:
Copy Code code as follows:
<script src= "Js/index/jquery-1.5.2.min.js" type= "Text/javascript" ></script>
<script src= "Js/index/raphael.2.1.0.min.js" type= "Text/javascript" ></script>
<script src= "Js/index/justgage.1.0.1.js" type= "Text/javascript" ></script>
<script src= "Js/index/highcharts.js" type= "Text/javascript" ></script>
<script src= "Js/index/exporting.js" type= "Text/javascript" ></script>
Timed refresh:
Copy Code code as follows:
Graph
AR Chart;
$ (document). Ready (function () {
Chart = new Highcharts.chart ({
Chart: {
Renderto: ' Divchart ',//container for placing charts
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 Arial '}
}
},
YAxis: {//y axis display text
Title: {
Text: ' MW '
}
},
ToolTip: {
Enabled:true,
Formatter:function () {
Return ' <b> ' + this.x + ' </b><br/> ' + this.series.name + ': ' + Highcharts.numberformat (THIS.Y, 1);
}
},
Plotoptions: {
Line: {
DataLabels: {
Enabled:true
},
enablemousetracking:true//whether title is displayed
}
},
Series: [{
Name: ' Unit 1th ',
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 2nd ',
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",//To 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 ("Error reading data!") ");
}
});
$.ajax ({
Type: "POST",//To 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 ("Error reading data!") ");
}
});
}
$ (document). Ready (function () {
Automatically call methods every 3 seconds to implement real-time updates of charts
GetForm ();
Window.setinterval (getform,600000);
});
});
Note here:
Copy Code code 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);
The body only needs to:
Copy Code code as follows:
<div id= "Divchart" > </div>
I hope this article will help you with your jquery programming.