title: Highchart datepicker range selector and can dynamically select what data to be displayed
body: <p>I'm new in jquery. I want to integrate highchart jquery plugins into my website. I've searched stackoverflow for jquery with CI integration and I found this code:</p>
  
  <pre><code>$(document).ready(function() {
          var a;
          options = {
          chart   : {renderTo: 'chart', type: 'line', marginRight: 130, marginBottom: 25},
          credits : {enabled: false},
          title   : {text: 'Sales Performance', x: -20},
          xAxis   : {categories: [{}]},
          yAxis   : {title: {text: '(IDR - millions)'}, plotLines: [{value: 0,width: 1,color: '#808080'}]},
          legend  : {layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0},
          tooltip : {
              valueDecimals: 2,
              formatter: function() {
                  var s = '&lt;b&gt;'+ this.x +'&lt;/b&gt;';
                  $.each(this.points, function(i, point) {
                      s += '&lt;br/&gt;'+point.series.name+': '+point.y;
                  });
                  return s;
              },
              shared: true
          },
          &lt;?php echo $series; ?&gt; // resulted like this -&gt; series: [{},{},{}.{}];
      };
      $.ajax({
          url : "generate_graph",
          type    : 'post',
          dataType: "json",
          success : function(data){ //to get data from multiple sales
              options.xAxis.categories = data.categories;
              for(a = 0; a &lt; data.count; a++){
                  options.series[a].name = data.name[a];
                  options.series[a].data = data.value[a];
              }
              var chart = new Highcharts.Chart(options);          
          }
      });
  })
  </code></pre>
  
  <p>My question is how can I modify this code if I want this chart able to recognize input like dynamically select data to be displayed (maybe not only sales perfomance, but profit) and range selector datepicker?</p>