Chart.SelectionRect

Defines the chart selection rectangle. For example:

Sample configuration:

var selectionRectConfig = {
    fillStyle: 'rgba(125,125,125,0.2)',
    strokeStyle: 'gray',
    lineWidth: 1
}

Example usage:

function addDays(date, value) {
          var newDate = new Date(date.getTime());
          newDate.setDate(date.getDate() + value);
          return newDate;
      }

      function round(d) {
          return Math.round(100 * d) / 100;
      }

      var data1 = [];
      var data2 = [];

      var yValue1 = 50;
      var yValue2 = 200;

      var date = new Date(2010, 0, 1);

      for (var i = 0; i < 200; i++) {

          yValue1 += Math.random() * 10 - 5;
          data1.push([date, round(yValue1)]);

          yValue2 += Math.random() * 10 - 5;
          data2.push([date, round(yValue2)]);

          date = addDays(date, 1);
      }

      $(document).ready(function () {
          $('#selector').jqChart({
              title: 'Selection Rectangle',
              selectionRect: {
                  fillStyle: 'rgba(125,125,125,0.2)',
                  strokeStyle: 'gray',
                  lineWidth: 1
              },
              mouseInteractionMode: 'zooming', // zooming, panning
              axes: [
                  {
                      type: 'dateTime',
                      location: 'bottom',
                      zoomEnabled: true
                  },
                  {
                      type: 'linear',
                      location: 'left',
                      zoomEnabled: true
                  }
              ],
              series: [
                  {
                      type: 'line',
                      data: data1,
                      markers: null
                  },
                  {
                      type: 'line',
                      data: data2,
                      markers: null
                  }
              ]
          }
      }