Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Drow Basic Lines Using Highchart

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 114
    Comment on it

    1- First of all place JS file in JS folder.

            jquery-1.11.0.min.js

            highcharts.js

            exporting.js

     

    2- Create an index.php file in main directory.

     

    3- Place below Javascript code under the head tag.

    <script>
    	$(function () {
    	    $('#container').highcharts({
    	        title: {
    	            text: 'Monthly Temperature',
    	            x: -20 //center
    	        },
    	        subtitle: {
    	            //text: 'Source: IndiaClimate.com',
    	            x: -20
    	        },
    	        xAxis: {
    	            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
    		                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    	        },
    	        yAxis: {
    	            title: {
    	                text: 'Temperature (C)'
    	            },
    		    plotLines: [{
    		        value: 0,
    		        width: 1,
    		        color: '#808080'
    		    }]
    		},
    		tooltip: {
    		    valueSuffix: 'C'
    		},
    	        legend: {
    	            layout: 'vertical',
    	            align: 'right',
    	            verticalAlign: 'middle',
    	            borderWidth: 0
    	        },
    	        series: [{
    	            name: 'New Delhi',
    	            data: [18.0, 20.9, 30.5, 34.5, 40.2, 42.5, 44.2, 45.5, 40.3, 35.3, 28.9, 29.6]
    	        }, {
    	            name: 'Mumbai',
    	            data: [29.2, 29.8, 30.7, 32.3, 35.0, 37.0, 39.8, 40.1, 39.1, 35.1, 29.6, 28.5]
    	        }, {
    	            name: 'Kolkata',
    	            data: [27.9, 28.6, 30.5, 32.4, 35.5, 37.0, 38.6, 40.9, 38.3, 36.0, 29.9, 26.0]
    	        }, {
    	            name: 'Chennai',
    	            data: [23.9, 24.2, 29.7, 30.5, 31.9, 35.2, 37.0, 39.6, 38.2, 35.3, 28.6, 24.8]
    	        }]
    	    });
    	});
    </script>

     

    4- Copy and Paste below code inside the body tag.

    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

     

    5- index.php would look like below code.

    <!DOCTYPE html>
    <html>
    <head>
    	<title>Highchart Basic Line</title>
    	<script src="js/jquery-1.11.0.min.js"></script>
    	<script src="js/highcharts.js"></script>
    	<script src="js/exporting.js"></script>
    	<script>
    			$(function () {
    			    $('#container').highcharts({
    			        title: {
    			            text: 'Monthly Temperature',
    			            x: -20 //center
    			        },
    			        subtitle: {
    			            //text: 'Source: IndiaClimate.com',
    			            x: -20
    			        },
    			        xAxis: {
    			            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
    			                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    			        },
    			        yAxis: {
    			            title: {
    			                text: 'Temperature (C)'
    			            },
    			            plotLines: [{
    			                value: 0,
    			                width: 1,
    			                color: '#808080'
    			            }]
    			        },
    			        tooltip: {
    			            valueSuffix: 'C'
    			        },
    			        legend: {
    			            layout: 'vertical',
    			            align: 'right',
    			            verticalAlign: 'middle',
    			            borderWidth: 0
    			        },
    			        series: [{
    			            name: 'New Delhi',
    			            data: [18.0, 20.9, 30.5, 34.5, 40.2, 42.5, 44.2, 45.5, 40.3, 35.3, 28.9, 29.6]
    			        }, {
    			            name: 'Mumbai',
    			            data: [29.2, 29.8, 30.7, 32.3, 35.0, 37.0, 39.8, 40.1, 39.1, 35.1, 29.6, 28.5]
    			        }, {
    			            name: 'Kolkata',
    			            data: [27.9, 28.6, 30.5, 32.4, 35.5, 37.0, 38.6, 40.9, 38.3, 36.0, 29.9, 26.0]
    			        }, {
    			            name: 'Chennai',
    			            data: [23.9, 24.2, 29.7, 30.5, 31.9, 35.2, 37.0, 39.6, 38.2, 35.3, 28.6, 24.8]
    			        }]
    			    });
    			});
    	</script>
    </head>
    <body>
    	<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    </body>
    </html>

     

    6- You can also download complete code from basicline.zip file.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: