Emprise Javascript Charts

Mark Point

Posted on by malykudelka

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