Here is given example of attempted question in particular time of online exam test.
First showing image of generated graph .
Features of chart:-
1. scrollbar for pagination
2. show xaxis value on dataLabels rather than yaxis value
3. change dataLabels text color, background color for wrong/right questions.
4. customize tooltips according to need
5. View Demo
1. Include first jquery-1.7.1.min.js or latest version
2. after that add below code between javascript script tag
3. Here container is div id where chart will be draw
5. add code for div
Features of chart:-
1. scrollbar for pagination
2. show xaxis value on dataLabels rather than yaxis value
3. change dataLabels text color, background color for wrong/right questions.
4. customize tooltips according to need
5. View Demo
1. Include first jquery-1.7.1.min.js or latest version
2. after that add below code between javascript script tag
3. Here container is div id where chart will be draw
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'line',
/*renderTo: 'container',
height:'600'*/
},
yAxis: {
min: 0,
max: 50,
tickInterval: 5,
title: {
text: 'Time (in minutes)',
/*align: 'high',
offset: 0,
margin: 60
rotation: 0,
y: -10*/
style: {
//color: 'Black',
fontWeight:'bold',
fontSize:14
}
}
},
xAxis: {
/* categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49]
, */
min:24.5,
tickInterval: 1,
title: {
text: 'Questions',
style: {
//color: 'Black',
fontWeight:'bold',
fontSize:14
}
},
minorTickLength: 0,
tickLength: 25
},
tooltip: {
crosshairs: true,
shared: true,
backgroundColor: '#ffffff',
borderColor: 'gray',
borderWidth: 1,
formatter: function () {
var s = 'Question ' + this.x + '';
$.each(this.points, function () {
totalSeconds =Math.floor(this.y*60) ;
hours = Math.floor(totalSeconds / 3600);
totalSeconds %= 3600;
minutes = Math.floor(totalSeconds / 60);
seconds = totalSeconds % 60;
if(seconds<10 br="" hours="" if="" minutes="" s="" seconds="">Taken '+ hours+':'+ minutes + ':'+seconds + ' minutes
('+ (this.y )+' X 60 seconds)';
});
return s;
}
},
title: {
/*floating: true,
align: 'left',
x: 100,
y: 40*/
text: 'Time Compare Analisys',
},
subtitle: {
text: '(with correct/in-correct questions)',
floating: true,
/*align: 'left',
x: 100,*/
y: 30
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
zIndex: 10,
padding:-15,
/* borderRadius: 5,
backgroundColor: 'rgba(252, 255, 197, 0.7)',
borderWidth: 1,
borderColor: '#AAA',
y: -6*/
}
}
},
series: [{
dataLabels: {
enabled: false
},
type: 'line',
color:'Grey',
dashStyle: 'longDash',
name: 'Regression Line',
lineWidth: 1,
data: [[0, 0], [49,50]],
marker: {
enabled: false
},
enableMouseTracking: false
},{name: 'Taken Time',
data: [0,{
y: 4.23,
color: 'green',
shadow: true,
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/correct_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 13.7,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 4.73,
color: 'green',
shadow: true,
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/correct_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.38,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.17,
color: 'green',
shadow: true,
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/correct_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.1,
color: 'green',
shadow: true,
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/correct_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 1.02,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.03,
color: 'green',
shadow: true,
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/correct_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.1,
color: 'green',
shadow: true,
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/correct_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.48,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.98,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.95,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.6,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.6,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.3,
color: 'green',
shadow: true,
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/correct_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.32,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.28,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.42,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.4,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.13,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.08,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.08,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.12,
color: 'green',
shadow: true,
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/correct_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.15,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.13,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.12,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.1,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.03,
color: 'green',
shadow: true,
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/correct_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.1,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.1,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.47,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.02,
color: 'green',
shadow: true,
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/correct_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.23,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.03,
color: 'green',
shadow: true,
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/correct_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.13,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.22,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.03,
color: 'green',
shadow: true,
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/correct_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.17,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.2,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.12,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.15,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.12,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.03,
color: 'green',
shadow: true,
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/correct_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.03,
color: 'green',
shadow: true,
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/correct_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.05,
color: 'green',
shadow: true,
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/correct_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.1,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.08,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.03,
color: 'green',
shadow: true,
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/correct_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
},{
y: 0.25,
color: 'red',
marker: {
symbol: 'circle',
radius: 12,
/* symbol: 'url(images/graph/incorrect_1.png)',
width: 43,
height: 38,*/
//rotate:30
},
dataLabels: {
formatter: function () {
var o = '' + this.x + '';
return o;
},
padding: -10,
shadow: true,
style: {
fontWeight: 'bold',
color: '#fff'
},
}
}]
}],
scrollbar: {
enabled: true
}
});
});
//]]</script>
4. include http://code.highcharts.com/stock/highstock.js before container div in body part5. add code for div
<div id="container" style="height: 400px;width:800px;"></div>
