EJSC.Chart Property Examples (Page 2)

Return to: Examples » EJSC.Chart

Properties Demonstrated

  • Standard EJSC.Chart Properties

Desired Result

Default Chart Settings

Source Code

  1. <script type="text/javascript">
  3.   var chart = new EJSC.Chart("myChart1a", {
  4.   });
  5.   chart.addSeries(new EJSC.AreaSeries(
  6.     new EJSC.ArrayDataHandler([
  7.       [.5,4.7],[2.1,3],[3.5,4.2],[4,2.3]
  8.     ])
  9.   ));
  11. </script>

Properties Demonstrated

  • building_message
  • drawing_message
  • max_zoom_message

Desired Result

This chart will have custom building, drawing, and max zoom messages.

Source Code

  1. <script type="text/javascript">
  3.   var chart = new EJSC.Chart("myChart1b", {
  4.     building_message: 'Currently Building...',
  5.     drawing_message: 'Currently Drawing...',
  6.     max_zoom_message: 'No More Zooming'
  7.   });
  8.   chart.addSeries(new EJSC.AreaSeries(
  9.     new EJSC.ArrayDataHandler([
  10.       [.5,4.7],[2.1,3],[3.5,4.2],[4,2.3]
  11.     ])
  12.   ));
  14. </script>

Properties Demonstrated

  • allow_mouse_wheel_zoom
  • allow_move
  • legend_title

Desired Result

This chart will not allow zooming by using the mouse-wheel, and will not allow the chart to be dragged around once zoomed in.

Source Code

  1. <script type="text/javascript">
  3.   var chart = new EJSC.Chart("myChart2a", {
  4.     allow_mouse_wheel_zoom: false,
  5.     allow_move: false,
  6.     legend_title: 'My Legend Title'
  7.   });
  8.   chart.addSeries(new EJSC.LineSeries(
  9.     new EJSC.ArrayDataHandler([
  10.       [1,1],[2,2.5],[3,3.75],[4,2],[5,3]
  11.     ])
  12.   ));
  14. </script>

Properties Demonstrated

  • axis_bottom
  • axis_left
  • axis_right
  • axis_top

Desired Result

This chart will show all four axis, even though they are not all being used.

Source Code

  1. <script type="text/javascript">
  3.   var chart = new EJSC.Chart("myChart2b", {
  4.     axis_bottom: { show: true },
  5.     axis_left: { show: true },
  6.     axis_right: { show: true },
  7.     axis_top: { show: true }
  8.   });
  9.   chart.addSeries(new EJSC.LineSeries(
  10.     new EJSC.ArrayDataHandler([
  11.       [1,1],[2,2.5],[3,3.75],[4,2],[5,3]
  12.     ])
  13.   ));
  15. </script>

Properties Demonstrated

  • text_value_array

Desired Result

Default Chart Settings

Source Code

  1. <script type="text/javascript">
  3.   var chart = new EJSC.Chart("myChart3a", {
  4.     text_value_array: [
  5.       'First',
  6.       'Second',
  7.       'Third',
  8.       'Fourth'
  9.     ]
  10.   });
  11.   chart.addSeries(new EJSC.LineSeries(
  12.     new EJSC.ArrayDataHandler([
  13.       [1,.7],[2,4],[3,5],[4,6]
  14.     ])
  15.   ));
  17. </script>
Return to: Examples » EJSC.Chart