Highcharts very useful JavaScript statistics Demo Example

Source: Internet
Author: User
Tags dateformat min

Highcharts Official website: http://www.highcharts.com
Highcharts Official Website Example: http://www.highcharts.com/demo/
Highcharts official website Document: Http://www.highcharts.com/documentation/how-to-use
Official website example gives a variety of demo, can refer to the document to modify their needs can be.
here is a student performance trend Demo:

Copy Code code as follows:




<! DOCTYPE html>


<html>


<head>


<meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 ">


<title>highcharts example</title>


<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" > </script>


<script type= "Text/javascript" >


$ (function () {


$ (' #container '). Highcharts ({


Chart: {


type: ' Spline '


},


title: {


text: ' First semester '


},


Xaxis: {





type: ' DateTime ',


Labels: {


formatter:function () {


return Highcharts.dateformat ('%y-%m-%d ', this.value);


}


}


},


YAxis: {


title: {


text: ' Score '


},


min:0


},


tooltip: {


//This mode, each point of the ToolTip separate display


Shared:false,


formatter:function () {


var s = ' <b> ' + this.point.name + ' </b> ' + ' <br/> ' + highcharts.dateformat ("%y/%m/%d", This.point.x) + ': ' +this.point.y + ' min <br/> ';


return s;


}


/**


This mode, the tooltip of the two points are displayed together


Shared:true,


formatter:function () {


var s= ';


$.each (this.points, function (i, point) {


s + = ' <b> ' + point.key + ' </b> ' + ' <br/> ' + highcharts.dateformat ("%y/%m/%d", Point.x) + ': ' +point.y + ' min <br/> ';


});


return s;


}


*/


},


series: [{


name: ' English ',


//Define the data points. All series have a dummy year


//Of 1970/71 in order to is compared on the same x axis. Note


//That in JavaScript, months start at 0 for January, 1 for February etc.





data: [


{x:date. UTC (1970, 9,), y:55, Name: ' First exam for first semester '},


{x:date. UTC (1970, a), y:60, Name: ' Second exam for first semester '},


{x:date. UTC (1970, N), y:70, Name: ' Third exam for first semester '},


{x:date. UTC (1970, 2), y:80, Name: ' First semester fourth exam '},


{x:date. UTC (1970, 9), y:60, Name: ' First semester fifth exam '},


{x:date. UTC (1970, All), y:60, Name: ' First semester sixth exam '},


{x:date. UTC (1970, each), y:67, Name: ' First semester seventh exam '},


{x:date. UTC (1971, 0, 1), y:81, Name: ' First semester eighth exam '},


{x:date. UTC (1971, 0, 8), y:78, Name: ' First semester nineth exam '},


{x:date. UTC (1971, 0,), y:98, Name: ' First semester tenth exam '},


{x:date. UTC (1971, 0,), y:84, Name: ' First semester 11th exam '},


{x:date. UTC (1971, 1,), y:80, Name: ' First semester 12th exam '},


{x:date. UTC (1971, 1,), y:80, Name: ' First semester 13th exam '},


{x:date. UTC (1971, 1,), y:92, Name: ' First semester 14th exam '},


{x:date. UTC (1971, 2, 4), y:49, Name: ' First semester 15th exam '},


{x:date. UTC (1971, 2, one), y:79, Name: ' First semester 16th exam '},


{x:date. UTC (1971, 2,), y:73, Name: ' First semester 17th exam '},


{x:date. UTC (1971, 2,), y:61, Name: ' First semester 18th exam '},


{x:date. UTC (1971, 3, 2), y:76, Name: ' First semester 19th exam '},


{x:date. UTC (1971, 3, 6), y:82, Name: ' First semester 20th exam '},


{x:date. UTC (1971, 3, y:84, Name: ' First semester 21st exam '},


{x:date. UTC (1971, 4, 3), Y:10, Name: ' First semester 22nd exam '},


{x:date. UTC (1971, 4,), y:19, Name: ' First semester 23rd exam '},


{x:date. UTC (1971, 5, 9), y:25, Name: ' First semester 24th exam '},


{x:date. UTC (1971, 5,), y:55, Name: ' First semester 25th exam '}


]


//,type: ' Column '


}, {


name: ' Math ',


data: [


{' x ':D ate. UTC (1970, 9,), ' Y ':, ' name ': ' First semester 1th exam '},


{x:date. UTC (1970, 9,), y:29, Name: ' First semester 2nd exam '},


{x:date. UTC (1970, 1), y:47, Name: ' First semester 3rd exam '},


{x:date. UTC (1970, one, one), y:55, Name: ' First semester 4th exam '},


{x:date. UTC (1970, each), y:38, Name: ' First semester 5th exam '},


{x:date. UTC (1971, 0, 8), y:38, Name: ' First semester 6th exam '},


{x:date. UTC (1971, 0,), y:38, Name: ' First semester 7th exam '},


{x:date. UTC (1971, 1, 1), y:38, Name: ' First semester 8th exam '},


{x:date. UTC (1971, 1, 8), y:48, Name: ' First semester 9th exam '},


{x:date. UTC (1971, 1,), y:58, Name: ' First semester 10th exam '},


{x:date. UTC (1971, 2,), y:89, Name: ' First semester 11th exam '},


{x:date. UTC (1971, 2,), y:70, Name: ' First semester 12th exam '},


{x:date. UTC (1971, 3, 4), y:94, Name: ' First semester 13th exam '},


{x:date. UTC (1971, 3, 9), y:91, Name: ' First semester 14th exam '},


{x:date. UTC (1971, 3, y:75, Name: ' First semester 15th exam '},


{x:date. UTC (1971, 3,), y:66, Name: ' First semester 16th exam '},


{x:date. UTC (1971, 4,), y:65, Name: ' First semester 17th exam '},


{x:date. UTC (1971, 4,), y:35, Name: ' First semester 18th exam '},


{x:date. UTC (1971, 5, 7), y:56, Name: ' First semester 19th exam '}


]


}, {


name: ' Chinese ',


data: [


{x:date. UTC (1970, 9, 9), y:0, Name: ' First semester 1th exam '},


{x:date. UTC (1970, 9,), y:15, Name: ' First semester 2nd exam '},


{x:date. UTC (1970,), Y:35, Name: ' First semester 3rd exam '},


{x:date. UTC (1970, one), y:46, Name: ' First semester 4th exam '},


{x:date. UTC (1971, 0, 1), y:59, Name: ' First semester 5th exam '},


{x:date. UTC (1971, 0,), y:58, Name: ' First semester 6th exam '},


{x:date. UTC (1971, 1, 1), y:62, Name: ' First semester 7th exam '},


{x:date. UTC (1971, 1, 7), y:65, Name: ' First semester 8th exam '},


{x:date. UTC (1971, 1,), y:77, Name: ' First semester 9th exam '},


{x:date. UTC (1971, 2, 8), y:77, Name: ' First semester 10th exam '},


{x:date. UTC (1971, 2,), y:79, Name: ' First semester 11th exam '},


{x:date. UTC (1971, 2,), y:86, Name: ' First semester 12th exam '},


{x:date. UTC (1971, 3, 4), y:80, Name: ' First semester 13th exam '},


{x:date. UTC (1971, 3,), y:94, Name: ' First semester 14th exam '},


{x:date. UTC (1971, 3,), y:98, Name: ' First semester 15th exam '},


{x:date. UTC (1971, 4,), y:39, Name: ' First semester 16th exam '},


{x:date. UTC (1971, 4,), y:0, Name: ' First semester 18th exam '},


]


}]


});


});





</script>


</head>


<body>


<script src= ". /.. /js/highcharts.js "></script>


<script src= ". /.. /js/modules/exporting.js "></script>


<div id= "container" style= "max-width:800px"; height:400px; margin:0 Auto "></div>


</body>


</html>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.