Wednesday, February 4, 2015

example: create chart using highchart api with different parameters

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
<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 part
5. add code for div
<div id="container" style="height: 400px;width:800px;"></div>