<!DOCTYPE html>
< html >
< head >
< meta http-equiv = "Content-Type"
content = "text/html; charset=utf-8" />
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 " />
< title >Highcharts Example</ title >
< script src = "highcharts.js" ></ script >
< script src = "exporting.js" ></ script >
< script src = "export-data.js" ></ script >
< script src = "accessibility.js" ></ script >
< style type = "text/css" >
body {
text-align: center;
}
.highcharts-figure,
.highcharts-data-table table {
min-width: 310px;
max-width: 600px;
margin: 2em auto;
}
#containerDivID {
height: 500px;
}
.highcharts-data-table table {
font-family: Arial;
border-collapse: collapse;
border: 2px solid #e9e9e9;
margin: 10px auto;
text-align: center;
width: 90%;
max-width: 550px;
}
.highcharts-data-table caption {
padding: 2em 0;
font-size: 1.3em;
color: #ffff;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #ffffff;
}
</ style >
</ head >
< body >
< h1 style = "color: green;" >GeeksforGeeks</ h1 >
< b >jQuery Highcharts Plugin</ b >
< figure class = "highcharts-figure" >
< div id = "containerDivID" ></ div >
< p class = "highcharts-description" >
It demonstrates the basic area chart
showing men and women working strength .
</ p >
</ figure >
< script type = "text/javascript" >
Highcharts.chart("containerDivID", {
chart: {
type: "area",
},
accessibility: {
description: "Image description: An area chart compares" +
" the working strength of the men and women" +
" between 1950 and 2020. The number men or " +
" women are plotted on the Y-axis and the " +
" years on the X-axis. ",
},
title: {
text: "Men and Women work force",
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function () {
return this.value;
},
},
accessibility: {
rangeDescription: "Years between : 1950 to 2020.",
},
},
yAxis: {
title: {
text: "Working strength",
},
labels: {
formatter: function () {
return this.value / 1000 + "k";
},
},
},
tooltip: {
pointFormat: "{series.name} reached {point.y:, .0f}" +
" in numbers in year {point.x}",
},
plotOptions: {
area: {
pointStart: 1950,
marker: {
enabled: false,
symbol: "circle",
radius: 2,
states: {
hover: {
enabled: true,
},
},
},
},
},
series: [
{
name: "men",
data: [
null,
null,
17,
12,
17,
13,
21,
14,
16,
19,
32,
21,
35,
25,
25,
55,
125,
155,
215,
427,
655,
852,
1160,
1617,
1478,
1321,
2138,
4221,
4512,
4502,
4502,
4500,
4501,
5502,
6229,
7189,
8139,
9199,
10538,
18517,
12527,
10475,
11421,
10358,
10295,
10104,
12610,
12401,
11643,
13092,
14478,
15915,
17385,
19055,
21215,
23210,
22010,
23044,
25393,
27935,
21000,
26000,
29000,
28010,
29020,
27010,
25000,
24000,
31982,
32040,
31233,
39197,
45000,
],
},
{
name: "women",
data: [
null,
null,
11,
12,
22,
23,
24,
27,
28,
32,
27,
45,
67,
78,
86,
92,
112,
201,
250,
289,
369,
621,
1005,
1436,
2063,
3057,
4618,
5113,
5113,
4954,
4804,
4761,
4717,
4368,
4218,
6444,
9914,
9620,
9326,
9822,
15468,
18020,
17020,
16020,
15507,
14062,
12787,
13287,
14747,
13076,
12551,
12144,
11009,
10950,
10871,
11004,
14304,
23464,
24314,
23086,
22380,
21434,
24126,
27387,
29459,
31056,
29224,
27342,
26662,
26926,
27912,
28909,
28905,
27826,
25079,
25702,
24826,
24605,
30062,
32049,
33852,
35804,
37000,
35020,
33011,
31008,
37431,
43000,
41000,
39000,
],
},
],
});
</ script >
</ body >
</ html >
|