Highcharts very useful JavaScript statistics Demo Example

Last Update:2017-02-28 Source: Internet

Author: User

Tags dateformat min

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More