Emprise Javascript Charts

Function Chart

Function Chart Example

Description

This is an example of a function chart with multiple series. It demonstrates use of the custom defined title, x_axis_caption, y_axis_caption, and formatted x and y axis zero planes properties. These allow for the custom title, x and y axis captions, and custom formatted x and y zero planes. The series titles are defined as well.

Source Code

  1. <script type=”text/javascript”>
  2.       var myChart6 = new EJSC.Chart( ‘myChart1a’ , {
  3.                              title: “Sample Function Chart” ,
  4.                              axis_bottom: {
  5.                                 caption: “X Value” ,
  6.                                 zero_plane: { show: true, color: ‘rgb(0,0,0)’ , thickness: 1 }
  7.                               } ,
  8.                              axis_left: {
  9.                                 caption: “Y Value” ,
  10.                                  zero_plane: { show: true, color: ‘rgb(0,0,0)’ , thickness: 1 }
  11.                                 }
  12.       } );
  13.         myChart6.addSeries( new EJSC.FunctionSeries( function(x) { return Math.pow(x,2); } ,
  14.                                      { title: “Function x^2” } ) );
  15.         myChart6.addSeries( new EJSC.FunctionSeries( function(x) { return Math.pow(x,3); } ,
  16.                                      { title: “Function x^3” } ) );
  17.         myChart6.addSeries( new EJSC.FunctionSeries( function(x) { return x; } ,
  18.                                      { title: “Function x” } ) );
  19. </script>

 …

Read More

Pie Piece Labels – Displaying hints for each piece

Description

This chart contains a PieSeries with a label centered over each piece.

Source Code

  1. <script type=”text/javascript”>
  2.   //
  3.   // Define the CSS in the header:
  4.   // <style type=”text/css” media=”screen,print”>
  5.   //     .PiePieceLabel { position: absolute; background-color: #fff; border: 1px solid #999; padding: 2px;
  6.   //    opacity: 0.8; filter: Alpha(opacity:80); }
  7.   // </style>
  8.   //
  9.   // Define variables to store references to the chart and series
  10.   var myChart, mySeries = undefined;
  11.   // After drawing is complete, create and/or reposition pie piece captions
  12.   function doAfterDraw(chart) {
  13.     // Verify series has been created
  14.     if (mySeries != undefined) {
  15.       var piePoints = mySeries.getPoints();
  16.       // Loop through the list of pie series points
  17.       for (var i = 0; i < piePoints.length; i++) {
  18.         // We’re saving the reference to the div object in the point,
  19.         // so check if it already exists
  20.         if (piePoints[i].hintDiv == undefined) {
  21.           // Create the div
  22.           piePoints[i].hintDiv = document.createElement(“DIV”);
  23.           piePoints[i].hintDiv.className = “PiePieceLabel”;
  24.           piePoints[i].hintDiv.innerHTML = “<strong>” + piePoints[i].label + “</strong><br/>” + piePoints[i].x + ” of ” + mySeries.getTotalValue() +
  25.             ” (” + (piePoints[i].x / mySeries.getTotalValue() * 100) + “%)”;
  26.           document.getElementsByTagName(“body”)[0].appendChild(piePoints[i].hintDiv);
  27.         }
  28.         // Find the center of the piece
  29.         var pointCoordinates = mySeries.findCenter(piePoints[i]);
  30.         // Adjust the location of the div based on the piece center
  31.         piePoints[i].hintDiv.style.left = pointCoordinates.x – Math.floor(piePoints[i].hintDiv.offsetWidth / 2) + “px”;
  32.         piePoints[i].hintDiv.style.top = pointCoordinates.y – Math.floor(piePoints[i].hintDiv.offsetHeight / 2) + “px”;
  33.       }
  34.     }
  35.   };
  36.   myChart = new EJSC.Chart(“myChart1a”,
  37.     {
  38.       show_legend: false,
  39.       allow_zoom: false,
  40.       show_mouse_position: false,
  41.       // Hide the standard hints
  42.       show_hints: false,
  43.       // Assign the onAfterDraw event
  44.       onAfterDraw: doAfterDraw
  45.     }
  46.   );
  47.   mySeries = new EJSC.PieSeries(
  48.     new EJSC.ArrayDataHandler(
  49.       [[10, “Piece 1”],[20, “Piece 2”],[45, “Piece 3″],[25,”Piece 4”]]
  50.     )
  51.   );
  52.   myChart.addSeries(mySeries);
  53. </script>

Read More

Area Chart Example

Description

This is an example of a simple area chart. It demonstrates use of the custom defined title, x_axis_caption, y_axis_caption, show_options, color, and show_hints properties. These allow for the display of the custom title, x axis caption, and y axis caption, a light brown colored series, and the disabling of the hints. A custom series title is added as well.

Source Code

  1. <script type=”text/javascript”>
  2.       var myChart2 = new EJSC.Chart( ‘myChart1a’ , {
  3.                            title: “Sample Area Chart” ,
  4.                            axis_bottom: { caption: “Frequency (Hz)” } ,
  5.                            axis_left: { caption: “Velocity (in/s)” } ,
  6.                            show_hints: false } );
  7.         myChart2.addSeries( new EJSC.AreaSeries( new EJSC.XMLDataHandler(“vibration2_area.xml”) ,
  8.                                       { title: “Area 1”,
  9.                                        color: ‘rgb(255,222,173)’} ) );
  10. </script>

Read More

Bar Chart Example

Description

This is an example of a simple bar chart. It demonstrates use of the custom defined title, x_axis_caption, y_axis_caption, show_crosshairs, and formatted x and y axis zero planes properties. These allow for the custom title, x and y axis captions, x and y axis crosshairs, and custom formatted x and y zero planes. The series title and color was defined as well.

Source Code

  1. <script type=”text/javascript”>
  2.     var myChart5 = new EJSC.Chart( ‘myChart1a’ , {
  3.                             title: “Sample Bar Chart” ,
  4.                             axis_bottom: {
  5.                               caption: “Ship”,
  6.                               crosshair: { show: true }
  7.                             } ,
  8.                              axis_left: {
  9.                               crosshair: { show: true },
  10.                               caption: “Velocity (in/s)”,
  11.                               zero_plane: { show: true, color: ‘rgb(0,0,0)’ , thickness: 1 }
  12.                             }
  13.                            }
  14.                    );
  15.         var myChart5Series = myChart5.addSeries( new EJSC.BarSeries( new EJSC.XMLDataHandler(“bar3.xml”) , {
  16.                                                         title: “Bar 1”,
  17.                                                         color: ‘rgb(255,48,48)’
  18.                                                           }
  19.                                       )
  20.                             )
  21. </script>

Read More

Mark Point

Custom Point Markers

Description (this example requires v2.0.1)

This chart displays a line series and implements the onDblClickPoint event to trigger the marking of the clicked point. When a user double clicks a point, or single clicks a point and presses the enter key, the event handler marks/un-marks the point by positioning a custom image which stays in place as the chart is zoomed and moved and point selection changes.

Double click a point below to mark it:

Source Code

  1. <script type=”text/javascript”>
  2.   // Save references to the ranges for easier access later
  3.   var markPoint = document.getElementById(“markPoint”);
  4.   var markPointImage = document.getElementById(“markPointImage”);
  5.   // This method will take the current zoom coordinates and position
  6.   // the given range
  7.   function positionMarker(bottom_zoom, left_zoom) {
  8.     // Determine if we have a selected point and hide or show the marker accordingly
  9.     if (markPoint.x == undefined || markPoint.y == undefined) {
  10.       markPoint.style.display = “none”;
  11.       return;
  12.     } else {
  13.       markPoint.style.display = “block”;
  14.     }
  15.     // Determine the pixel coordinates of the point to be marked
  16.     var left = chart.axis_bottom.pointToPixel(markPoint.x, true).point – 16;
  17.     var top = chart.axis_left.pointToPixel(markPoint.y, true).point – 16;
  18.     // Translate zoom coordinates into screen pixels
  19.     bottom_zoom = {
  20.       min: chart.axis_bottom.pointToPixel(bottom_zoom.min),
  21.       max: chart.axis_bottom.pointToPixel(bottom_zoom.max)
  22.     };
  23.     left_zoom = {
  24.       min: chart.axis_left.pointToPixel(left_zoom.min),
  25.       max: chart.axis_left.pointToPixel(left_zoom.max)
  26.     };
  27.     // Position the marker, adjusting styles and dimensions as necessary to make it
  28.     // partially visible when not fully within the bounds of the chart
  29.     if (((left + 32) < bottom_zoom.min) || (left > bottom_zoom.max) ||
  30.     ((top + 32) < left_zoom.max) || (top > left_zoom.min)) {
  31.       markPoint.style.display = “none”;
  32.     } else {
  33.       markPoint.style.display = “block”;
  34.       // If point is outside the visible range but the image should
  35.       // still be partially visible, adjust its width and image
  36.       // position so it appears to disappear beneath the axis /
  37.       // chart bounds
  38.       if (left < bottom_zoom.min) {
  39.         markPoint.style.left = bottom_zoom.min + “px”;
  40.         markPoint.style.width = 32 – (bottom_zoom.min – left) + “px”;
  41.         markPointImage.style.left = “-” + (bottom_zoom.min – left) + “px”;
  42.       } else if ((left + 32) > bottom_zoom.max) {
  43.         markPoint.style.left = left + “px”;
  44.         markPoint.style.width = (bottom_zoom.max – left) + “px”;
  45.         markPointImage.style.left = “0px”;
  46.       } else {
  47.         // Image is fully visible, position it and reset its width
  48.         markPoint.style.left = left + “px”;
  49.         markPoint.style.width = “32px”;
  50.         markPointImage.style.left = “0px”;
  51.       }
  52.       // If point is outside the visible range but the image should
  53.       // still be partially visible, adjust its width and image
  54.       // position so it appears to disappear beneath the axis /
  55.       // chart bounds
  56.       if (top < left_zoom.max) {
  57.         markPoint.style.top = left_zoom.max + “px”;
  58.         markPoint.style.height = 32 – (left_zoom.max – top) + “px”;
  59.         markPointImage.style.top = “-” + (left_zoom.max – top) + “px”;
  60.       } else if ((top + 32) > left_zoom.min) {
  61.         markPoint.style.top = top + “px”;
  62.         markPoint.style.height = (left_zoom.min – top) + “px”;
  63.         markPointImage.style.top = “0px”;
  64.       } else {
  65.         markPoint.style.top = top + “px”;
  66.         markPoint.style.height = “32px”;
  67.         markPointImage.style.top = “0px”;
  68.       }
  69.     }
  70.   };
  71.   // doDblClickPoint will be attached to the chart’s onDblClickPoint event and will
  72.   // register the clicked point so that it can be positioned as necessary
  73.   function doDblClickPoint(point, series, chart) {
  74.     // Record the point coordinates so that we can reposition if the chart is zoomed or moved
  75.     markPoint.x = point.x;
  76.     markPoint.y = point.y;
  77.     // Get the current coordinates of the chart area in axis-specific units
  78.     var bottom_zoom = chart.axis_bottom.getZoom();
  79.     var left_zoom = chart.axis_left.getZoom();
  80.     // Position the marker
  81.     positionMarker(bottom_zoom, left_zoom);
  82.     // Return false to cancel the zoom out (if applicable)
  83.     return false;
  84.   };
  85.   // doAfterDraw will be attached to the chart’s onAfterDraw event and
  86.   // move the markers into the correct position
  87.   function doAfterDraw() {
  88.     // Get the current coordinates of the chart area in axis-specific units
  89.     var bottom_zoom = chart.axis_bottom.getZoom();
  90.     var left_zoom = chart.axis_left.getZoom();
  91.     if (!isNaN(bottom_zoom.min) && !isNaN(bottom_zoom.max) &&
  92.     !isNaN(left_zoom.min) && !isNaN(left_zoom.max)) {
  93.       positionMarker(bottom_zoom, left_zoom);
  94.     }
  95.   }
  96.   var chart = new EJSC.Chart(“myChart1a”,
  97.     {
  98.       show_titlebar: false,
  99.       show_legend: false,
  100.       axis_bottom: {
  101.         size: 30,
  102.         caption: “Dates”,
  103.         extremes_ticks: true,
  104.         formatter: new EJSC.DateFormatter({format_string: “MM/DD<br/>HH:NN”})
  105.       },
  106.       axis_left: {
  107.         caption: “Level”,
  108.         min_extreme: -50,
  109.         max_extreme: 150,
  110.         formatter: new EJSC.NumberFormatter({forced_decimals: 1})
  111.       },
  112.       allow_zoom:

Read More

Pie Series

EJSC.PieSeries Property Examples

Properties Demonstrated

  • Standard EJSC.PieSeries Properties

Desired Result

Default EJSC.PieSeries Settings

Properties Demonstrated

  • defaultColors
  • treeLegend

Desired Result

This chart will have a new set of colors defined as the pool of colors to be used when creating the pie pieces, and show its items in the legend in a treeview format.

Source Code

  1. <script type=”text/javascript”>
  2.   var chart = new EJSC.Chart(“myChart1a”, {
  3.     show_legend: false
  4.   });
  5.   chart.addSeries(new EJSC.PieSeries(
  6.     new EJSC.ArrayDataHandler([[3,”Widgets”],
  7.       [7,”Doodads”],[4,”Thingamagigs”],
  8.       [10,”Whatchamacallits”],[2,”Gizmos”],
  9.       [5,”Thingies”]])
  10.   ));
  11. </script>

Source Code

  1. <script type=”text/javascript”>
  2.   var chart = new EJSC.Chart(“myChart1b”, {
  3.   });
  4.   chart.addSeries(new EJSC.PieSeries(
  5.     new EJSC.ArrayDataHandler([[3,”Widgets”],
  6.       [7,”Doodads”],[4,”Thingamagigs”],
  7.       [10,”Whatchamacallits”],[2,”Gizmos”],
  8.       [5,”Thingies”]]
  9.     ),
  10.     {
  11.       treeLegend: true ,
  12.       defaultColors: [
  13.           ‘rgb(255,140,0)’,  //DarkOrange
  14.           ‘rgb(178,34,34)’,  //FireBrick
  15.           ‘rgb(153,50,204)’,  //DarkOrchid
  16.           ‘rgb(255,255,0)’,  //Yellow
  17.           ‘rgb(112,219,147)’,  //AquaMarine
  18.           ‘rgb(35,107,142)’  //SteelBlue
  19.       ]
  20.     }
  21.   ));
  22. </script>

Read More

Stacked Chart Example

Description

This is an example of a stacked chart. It demonstrates the ability to easily display multiple series of various types on a single chart. In this example a pie, scatter, and line chart are displayed simultaneously. Each series type can be displayed or hidden using the chart legend. In addition the chart exhibits use of the customer title, x axis caption, and y axis caption properties. Each series defines its own custom title as well.

Source Code

  1. <script type=”text/javascript”>
  2.       var myChart4 = new EJSC.Chart( ‘myChart1a’ , {
  3.                            title: “Sample Stacked Chart” ,
  4.                            axis_bottom: { caption: “Frequency (Hz)” } ,
  5.                            axis_left: { caption: “Velocity (in/s)” } } );
  6.         myChart4.addSeries( new EJSC.PieSeries( new EJSC.XMLDataHandler(“pie.xml”) ,
  7.                              {title: “Pie 1” } ) );
  8.         myChart4.addSeries( new EJSC.ScatterSeries( new EJSC.XMLDataHandler(“scatter-mix.xml”) ,
  9.                                { title: “Scatter 1” } ) );
  10.         myChart4.addSeries( new EJSC.LineSeries( new EJSC.XMLDataHandler(“line-mix.xml”) ,
  11.                              { title: “Line 1” } ) );
  12. </script>

Read More

Line Chart Example

Description

This is an example of a simple line chart. It demonstrates use of the custom defined title, x_axis_caption, y_axis_caption, auto_zoom, auto_find_point_by_x, and show_crosshairs properties. These allow for the custom title, x axis caption, and y axis caption, an auto defined zoom range, the auto selection of points by position of cursor on the x axis, and the display of the x axis crosshairs. The series title was defined as well.

Source Code

  1. <script type=”text/javascript”>
  2.         var myChart1 = new EJSC.Chart( ‘myChart1a’ , {
  3.                                title: “Sample Line Chart” ,
  4.                                axis_bottom: { caption: “Frequency (Hz)” , crosshair: { show: true } } ,
  5.                                axis_left: { caption: “Velocity (in/s)” , crosshair: { show: false } } ,
  6.                                auto_zoom: ‘y’ ,
  7.                                auto_find_point_by_x: true
  8.                                }
  9.                        );
  10.         myChart1.addSeries( new EJSC.LineSeries( new EJSC.XMLDataHandler(“vibration2.xml”) , {
  11.                                                    title: “Line 1”,
  12.                                                     __padding: { x_min: 0, y_min: 1, x_max: 0, y_max: 5 }
  13.                                                    }
  14.                             )
  15.                  );
  16. </script>

Read More