Dynamic x Axis line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Line Chart

Description

Dynamic x Axis line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){/*from   w w  w  . ja  v a  2 s  . c  o  m*/
$(document).ready(function () {
  $('#xd').click(function () {
    draw();
  });
});
function draw() {
  var myArray = [];
  myArray = [1, 5, 10, 11, 8, 6, 7 ,8 ,9, 10, 2, 2, 2, 2];
  var dates = [];
  dates = ["11/Nov/16", "11/Dic/16", '11/Jan/2017'];
  $('#grafic').highcharts({
        title: {
            text: 'Sampled Parts'
        },
        xAxis: {
          tickInterval:5,
            type: 'linear',
            labels: {
                rotation: -33,
                formatter: function () {
                   return dates[this.value / 5];
                }
            },
        },
        yAxis: {
            allowDecimals: true,
            min: 0,
            title: {
                text: 'Resultados'
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }
        },
        legend: {
            reversed: true
        },
        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'My Data',
            data: myArray
        }]
    });
}
    }

      </script> 
   </head> 
   <body> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="grafic"> 
      </div> 
      <button id="xd">Click</button>  
   </body>
</html>

Related Tutorials