Description

This chart displays two overlayed bar series. The first is formatted to appear as a max value and will be filled at each point by the second series. Two DIV elements have been added to mark the normal range of the chart and are positioned over the chart when it is drawn. Custom hints have been added to allow display of a single hint per X axis point which displays only the 'data' value for each point.

Source Code

1. <script type="text/javascript">
3.   // Save references to the marks for easier access later
4.   var mLow = document.getElementById("markerLow");
5.   var mHigh = document.getElementById("markerHigh");
6.   // doAfterDraw will be attached to the chart's onAfterDraw event and
7.   // move the markers into the correct position
8.   function doAfterDraw() {
9.     // Determine the pixel coordinates of the left side of the chart at y value 15
10.     var x_axis = chart.axis_bottom.getZoom();
11.     var y_axis = chart.axis_left.getZoom();
12.     coordsLeft = {
13.       top: chart.axis_left.pointToPixel(15),
14.       left: chart.axis_bottom.pointToPixel(x_axis.min)
15.     };
16.     // Determine the pixel coordinates of the right side of the chart at y value 15
17.     coordsRight = {
18.       top: chart.axis_left.pointToPixel(15),
19.       left: chart.axis_bottom.pointToPixel(x_axis.max)
20.     };
21.     // If top (i.e. y value of 15) is not in view, it will be returned as undefined
22.     // if that's the case, hide the low marker
23.     if (coordsLeft.top == undefined) { mLow.style.display = "none"; }
24.     else { mLow.style.display = "block"; }
25.     var left = coordsLeft.left;
26.     var width = coordsRight.left - coordsLeft.left + 60;
27.     // Move the low marker into the correct position (accounting for its 14 pixel height)
28.     mLow.style.top = coordsLeft.top - 14 + "px";
29.     mLow.style.left = left + "px";
30.     mLow.style.width = width + "px";
31.     // Determine the pixel coordinates of y value 90
32.     coordsLeft = {
33.       top: chart.axis_left.pointToPixel(90),
34.       left: chart.axis_bottom.pointToPixel(chart.x_min)
35.     };;
36.     // If top (i.e. y value of 90) is not in view, it will be returned as undefined
37.     // if that's the case, hide the high marker
38.     if (coordsLeft.top == undefined) { mHigh.style.display = "none"; }
39.     else { mHigh.style.display = "block"; }
40.     // Move the high marker into the correct position
41.     mHigh.style.top = coordsLeft.top - 14 + "px";
42.     mHigh.style.left = left + "px";
43.     mHigh.style.width = width + "px";    
44.   }
45.   window.onload = doAfterDraw;
46.   // doShowHint will be attached to the chart's onShowHint event and allow
47.   // us to show all hints at the top of the container bar (even when the mouse
48.   // is over or has clicked on a value bar) as well as customize the display
49.   // to show colored values based on the bars
50.   function doShowHint(point, series, chart, hint, sticky) {
51.     // Get the current Y value of the related bar in the barValueSeries
52.     var currentYValue = barValuesSeries.findClosestByPoint({ x: point.x, y: 0 }).y;
53.     var className;
54.     if (currentYValue < 15) { className = "yellow"; }
55.     else if (currentYValue < 90) { className = "green"; }
56.     else { className = "red"; }
57.     // Modify the hint window to display maximum value and current value
58.     return '[x]: <strong class="' + className + '">' + currentYValue + '</strong>';
59.   }
60.   function doBeforeSelectPoint(point, series, chart, hint, sticky) {
61.     // Find out if the point is in the container series or bar series
62.     if (series == barValuesSeries) {
63.       // hint is triggered from the value series, find the same bar in the
64.       // container series and select it instead
65.       chart.selectPoint(barContainersSeries.findClosestByPoint({ x: point.x, y: point.y }), (sticky != "hover"));
66.       // Cancel selection of this point
67.       return false;
68.     }
69.   }
70.   var chart = new EJSC.Chart("myChart1a",
71.     {
72.       show_titlebar: false,
73.       show_legend: false,
74.       axis_bottom: { caption: "", extremes_ticks: true },
75.       axis_left: { caption: "Level" },
76.       allow_zoom: true,
77.       onAfterDraw: doAfterDraw,
78.       onShowHint: doShowHint,
79.       onBeforeSelectPoint: doBeforeSelectPoint
80.     }
81.   );
82.   // Modify extremes for a little bit of padding on the top
83.   chart.axis_left.setExtremes(0,105);
84.   // Define colors for bar ranges
85.   var barRanges = [
86.     { min: 0, max: 14, color: "rgb(255,255,0)", opacity: 80, lineOpacity: 80, lineWidth: 0 },  
87.     { min: 15, max: 90, color: "rgb(0,216,0)", opacity: 80, lineOpacity: 80, lineWidth: 0 },  
88.     { min: 90, max: 100, color: "rgb(255,0,0)", opacity: 80, lineOpacity: 80, lineWidth: 0 }
89.   ];  
90.   var barValuesSeries = new EJSC.BarSeries(
91.     new EJSC.ArrayDataHandler([
92.       ["Tank A",60],["Tank B",50],["Tank C",55],
93.       ["Tank D",95],["Tank E",56],["Tank F",10]
94.     ]),
95.     {
96.       // Turn off grouping so that the series overlay
97.       groupedBars: false,
98.       intervalOffset: 0.9,
99.       ranges: barRanges
100.     }
101.   );
102.   // barContainersSeries will define the empty bars which appear to be filled
103.   // with the bars defined by barValuesSeries
104.   var barContainersSeries = new EJSC.BarSeries(
105.     new EJSC.ArrayDataHandler([
106.       ["Tank A",100],["Tank B",100],["Tank C",100],
107.       ["Tank D",100],["Tank E",100],["Tank F",100]
108.     ]),
109.     {
110.       // Style bars with thicker borders and no fill
111.       lineWidth: 3,
112.       color: "rgb(0,0,0)",
113.       intervalOffset: 0.9,
114.       opacity: 10
115.     }
116.   );
117.   chart.addSeries(barValuesSeries);
118.   chart.addSeries(barContainersSeries);
120. </script>