Reduce no of points in X axis in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

Reduce no of points in X axis in line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highchart demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){/*from   w  ww.j a  v a 2s  .  c o m*/
$(function () {
    $("#drpApp").on("change",function(e){
    loadGraph();
    });
     loadGraph();
});
function loadGraph()
{
 var g1curve1 = [],g1curve2 = [], g1curve3 = [] ,g1curve4 = [];
 var g2curve1 = [],g2curve2 = [],g2curve3 = [],g2curve4 = [];
  var data1,data2,data3,data4;
  for(i=1;i<=53;i++)
  { var tempArr = [] , tempArr1 = [] , tempArr2 = [] ,tempArr3 =[];
    var tempArr4 = [] , tempArr5 = [] , tempArr6 = [] ,tempArr7 =[];
    tempArr[0] = "week"+i;
    tempArr1[0] = "week"+i;
    tempArr2[0] = "week"+i;
    tempArr3[0] = "week"+i;
    tempArr4[0] = "week"+i;
    tempArr5[0] = "week"+i;
    tempArr6[0] = "week"+i;
    tempArr7[0] = "week"+i;
    tempArr[1] = Math.random()*11.2;
    tempArr1[1] = Math.random()*180;
    tempArr2[1] = Math.random()*550;
    tempArr3[1] = Math.random()*300;
    tempArr4[1] = Math.random()*10;
    tempArr5[1] = Math.random()*450;
    tempArr6[1] = Math.random()*950;
    tempArr7[1] = Math.random()*1500;
    g1curve1.push(tempArr);
    g1curve2.push(tempArr1);
    g1curve3.push(tempArr2);
    g1curve4.push(tempArr3);
    g2curve1.push(tempArr4);
    g2curve2.push(tempArr5);
    g2curve3.push(tempArr6);
    g2curve4.push(tempArr7);
  }
 var appName = $("#drpApp").val();
 var grpahTitle = $("#drpApp option:selected").text();
 if (appName == "g1") { data1 = g1curve1,data2=g1curve2;data3 =g1curve3;data4 = g1curve4 }
 else { data1 = g2curve1,data2=g2curve2,data3=g2curve3,data4=g2curve4;}
  $('#container').highcharts({
          chart: {
            zoomType: 'x'
        },
        xAxis: {
            labels: {
                formatter: function() {
                    return 'Week '+(this.value +1);
                }
            }
        },
        title : {
                text : grpahTitle
            },
        series: [{
            data: data1,
            name: "data1"
        },{
            data: data2,
            name: "data2"
        },
                 {
            data: data3,
            name: "data3"
        } ,
                 {
            data: data4,
            name: "data4"
        }
                ]
    });
}
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="selApp"> 
         <select id="drpApp"> 
            <option value="g1" selected>Application 1 </option> 
            <option value="g2">Application 2 </option> 
         </select> 
      </div> 
      <div id="container" style="height: 400px"></div>  
   </body>
</html>

Related Tutorials