Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Drow Basic Lines Using Highchart

    @qazi.raza
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 393
    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.

    1. <script>
    2.     $(function () {
    3.         $('#container').highcharts({
    4.             title: {
    5.                 text: 'Monthly Temperature',
    6.                 x: -20 //center
    7.             },
    8.             subtitle: {
    9.                 //text: 'Source: IndiaClimate.com',
    10.                 x: -20
    11.             },
    12.             xAxis: {
    13.                 categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
    14.                         'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    15.             },
    16.             yAxis: {
    17.                 title: {
    18.                     text: 'Temperature (C)'
    19.                 },
    20.             plotLines: [{
    21.                 value: 0,
    22.                 width: 1,
    23.                 color: '#808080'
    24.             }]
    25.         },
    26.         tooltip: {
    27.             valueSuffix: 'C'
    28.         },
    29.             legend: {
    30.                 layout: 'vertical',
    31.                 align: 'right',
    32.                 verticalAlign: 'middle',
    33.                 borderWidth: 0
    34.             },
    35.             series: [{
    36.                 name: 'New Delhi',
    37.                 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]
    38.             }, {
    39.                 name: 'Mumbai',
    40.                 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]
    41.             }, {
    42.                 name: 'Kolkata',
    43.                 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]
    44.             }, {
    45.                 name: 'Chennai',
    46.                 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]
    47.             }]
    48.         });
    49.     });
    50. </script>

     

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

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

     

    5- index.php would look like below code.

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <title>Highchart Basic Line</title>
    5.     <script src="js/jquery-1.11.0.min.js"></script>
    6.     <script src="js/highcharts.js"></script>
    7.     <script src="js/exporting.js"></script>
    8.     <script>
    9.             $(function () {
    10.                 $('#container').highcharts({
    11.                     title: {
    12.                         text: 'Monthly Temperature',
    13.                         x: -20 //center
    14.                     },
    15.                     subtitle: {
    16.                         //text: 'Source: IndiaClimate.com',
    17.                         x: -20
    18.                     },
    19.                     xAxis: {
    20.                         categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
    21.                             'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    22.                     },
    23.                     yAxis: {
    24.                         title: {
    25.                             text: 'Temperature (C)'
    26.                         },
    27.                         plotLines: [{
    28.                             value: 0,
    29.                             width: 1,
    30.                             color: '#808080'
    31.                         }]
    32.                     },
    33.                     tooltip: {
    34.                         valueSuffix: 'C'
    35.                     },
    36.                     legend: {
    37.                         layout: 'vertical',
    38.                         align: 'right',
    39.                         verticalAlign: 'middle',
    40.                         borderWidth: 0
    41.                     },
    42.                     series: [{
    43.                         name: 'New Delhi',
    44.                         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]
    45.                     }, {
    46.                         name: 'Mumbai',
    47.                         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]
    48.                     }, {
    49.                         name: 'Kolkata',
    50.                         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]
    51.                     }, {
    52.                         name: 'Chennai',
    53.                         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]
    54.                     }]
    55.                 });
    56.             });
    57.     </script>
    58. </head>
    59. <body>
    60.     <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    61. </body>
    62. </html>

     

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

    php Javascript html
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: