Graph chart code for getting reports by column chart

 
<!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">
//Column Chart
$(function () {

var percentage=document.getElementById('percentage').value;
var examname=document.getElementById('examname').value;
//alert(percentage);alert(examname);

var percentage1 =percentage.split("~");
      var examname1 = examname.split("~");
      var exam=[],percent=[];
      for (var i=0;i<examname1.length;i++)
{
exam[i]=examname1[i];
percent[i]=percentage1[i];
}
//alert(exam);alert(percent);
        $('#container').highcharts({
            chart: {
                        backgroundColor: {
                linearGradient: [0, 0, 500, 500],
                stops: [
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(200, 200, 255)']
                ]
            },
            borderColor: '#EBBA95',
            borderWidth: 2,
                type: 'column',
                margin: [ 50, 50, 100, 80]
            },
            title: {
                text: 'Library Month Wise Report...'
            },
            xAxis: {
                categories:exam,
                labels: {
                    rotation: -45,
                    align: 'right',
                    style: {
                   
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                },
                 title: {
                    text: '<br/>Exam Names'
                }
            },
           
            yAxis: {
            gridLineColor: '#197F07',
            gridLineWidth: 2,
                min: 0,
                title: {
                    text: 'Books'
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                pointFormat: 'Marks: <b>{point.y:.1f} %</b>',
            },
            series: [{
                name: 'Percentage',
                data: JSON.parse("["+percent+"]"),
                dataLabels: {
                    enabled: true,
                    rotation: -90,
                    color: '#FFFFFF',
                    align: 'right',
                    x: 4,
                    y: 10,
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif',
                        textShadow: '0 0 3px black'
                    }
                }
            }],
            navigation: {
            buttonOptions: {
                text:"Print/Download",
                theme: {
                    'stroke-width': 1,
                    stroke: 'silver',
                    fill: '#bada55',
                    r: 0,
                    states: {
                        hover: {
                            fill: '#bada55'
                        },
                        select: {
                            stroke: '#039',
                            fill: '#bada55'
                        }
                    }
                }
            }
        }
       
        });
       
    });
</script>

<!--<script type="text/javascript">
//Line Chart
$(function () {

var percentage=document.getElementById('percentage').value;
var examname=document.getElementById('examname').value;
//alert(percentage);alert(examname);

var percentage1 =percentage.split("~");
      var examname1 = examname.split("~");
      var exam=[],percent=[];
      for (var i=0;i<examname1.length;i++)
{
exam[i]=examname1[i];
percent[i]=percentage1[i];
}
//alert(exam);alert(percent);
        $('#line').highcharts({
            chart: {
                        backgroundColor: {
                linearGradient: [0, 0, 500, 500],
                stops: [
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(200, 200, 255)']
                ]
            },
            borderColor: '#EBBA95',
            borderWidth: 2,
                type: 'line',
                margin: [ 50, 50, 100, 80]
            },
            title: {
                text: 'Exam Result...'
            },
            xAxis: {
                categories:exam,
                labels: {
                    rotation: -45,
                    align: 'right',
                    style: {
                   
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                },
                 title: {
                    text: '<br/>Exam Names'
                }
            },
           
            yAxis: {
            gridLineColor: '#197F07',
            gridLineWidth: 2,
                min: 0,
                title: {
                    text: 'Marks ( percentage )'
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                pointFormat: 'Marks: <b>{point.y:.1f} %</b>',
            },
            series: [{
                name: 'Percentage',
                data: JSON.parse("["+percent+"]"),
                dataLabels: {
                    enabled: true,
                    rotation: -90,
                    color: '#FFFFFF',
                    align: 'right',
                    x: 4,
                    y: 10,
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif',
                        textShadow: '0 0 3px black'
                    }
                }
            }],
            navigation: {
            buttonOptions: {
                text:"Print/Download",
                theme: {
                    'stroke-width': 1,
                    stroke: 'silver',
                    fill: '#bada55',
                    r: 0,
                    states: {
                        hover: {
                            fill: '#bada55'
                        },
                        select: {
                            stroke: '#039',
                            fill: '#bada55'
                        }
                    }
                }
            }
        }
       
        });
       
    });
</script> -->
</head>
<body>

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<!-- <script src="chart/highcharts.js"></script>
<script src="chart/exporting.js"></script> -->
 
   <input type="hidden" id="percentage" name="percentage" value="56,70,80 "/>
    <input type="hidden" id="examname" name="examname" value="maths,social,hindi "/>
   
<div id="container" style="min-width: 500px; height: 400px; margin: 0 auto;" ></div>
<div id="line" style="min-width: 500px; height: 400px; margin: 0 auto;" ></div>
<br/>
<!-- <div id="line" style="min-width: 500px; height: 400px; margin: 0 auto;" ></div>
<br/> -->

<br/>
 


</body>
</html>