EJSC.BarSeries Property Examples

Return to: Examples » EJSC.BarSeries

Methods Demonstrated

Desired Result

Default EJSC.BarSeries

Source Code

  1. <script type="text/javascript">
  3.   var chart = new EJSC.Chart("myChart1a", {
  4.     show_legend: false
  5.   });
  6.   chart.addSeries(new EJSC.BarSeries(
  7.     new EJSC.ArrayDataHandler([
  8.       [0,1],[1,10],[2,4],[3,2]
  9.     ])
  10.   ));
  12. </script>

Methods Demonstrated

  • setDefaultColors
  • setIntervalOffset

Description

These buttons will change the Bar Series color and interval offset.

Source Code

  1. <script type="text/javascript">
  3.   var chart1 = new EJSC.Chart("myChart1b", {
  4.     show_legend: false
  5.   });
  6.   var series1 = chart1.addSeries(new EJSC.BarSeries(
  7.     new EJSC.ArrayDataHandler([
  8.       [0,1],[1,10],[2,4],[3,2]
  9.     ]),
  10.     { useColorArray: true }
  11.   ));
  12.   // Default Colors Button onclick:
  13.   //  series1.setDefaultColors(
  14.   //    ['rgb(200,0,0)',
  15.   //     'rgb(0,0,200)',
  16.   //     'rgb(0,0,200)',
  17.   //     'rgb(100,100,100)']
  18.   //  );
  19.   //  chart1.redraw();
  20.   // Interval Button onclick:
  21.   //  series1.setIntervalOffset(.1);
  22.   // Triangle Button onclick:
  23.   //  series1.setPointStyle(3,'triangle');
  25. </script>

Methods Demonstrated

  • setGroupedBars

Desired Result

The buttons will group and ungroup the Bar Series.

Source Code

  1. <script type="text/javascript">
  3.   var chart2 = new EJSC.Chart("myChart2a", {
  4.     show_legend: false
  5.   });
  6.   var series2a = chart2.addSeries(new EJSC.BarSeries(
  7.     new EJSC.ArrayDataHandler([
  8.       [0,1],[1,10],[2,4],[3,2]
  9.     ])
  10.   ));
  11.   var series2b = chart2.addSeries(new EJSC.BarSeries(
  12.     new EJSC.ArrayDataHandler([
  13.       [0,5],[1,2],[2,7],[3,6]
  14.     ])
  15.   ));
  16.   // Grouped Button onclick:
  17.   //  series2a.setGroupedBars(true);
  18.   // Not Grouped Button onclick:
  19.   //  series2a.setGroupedBars(false);
  21. </script>

Methods Demonstrated

  • addRange
  • deleteRange
  • clearRanges

Description

These buttons will change the associated ranges.

Source Code

  1. <script type="text/javascript">
  3.   var chart3 = new EJSC.Chart("myChart2b", {
  4.     show_legend: false
  5.   });
  6.   var series3 = chart3.addSeries(new EJSC.BarSeries(
  7.     new EJSC.ArrayDataHandler([
  8.       [0,1],[1,10],[2,4],[3,2]
  9.     ]),
  10.     { useColorArray: true }
  11.   ));
  12.   // Add (0-5) Button onclick:
  13.   //  series3.addRange(0,5,'rgb(200,0,0)',.4,1,1);
  14.   // Add (5-10) Button onclick:
  15.   //  series3.addRange(5,10,'rgb(0,200,0)',.4,1,1);
  16.   // Delete (0-5) Button onclick:
  17.   //  series3.deleteRange(0,5);
  18.   // Clear All Button onclick:
  19.   //  series3.clearRanges();
  21. </script>
Return to: Examples » EJSC.BarSeries