Properties Demonstrated

• Series.x_axis: "top" | "bottom"
• Series.y_axis: "left" | "right"

Desired Result

Multiple axes can be used to compare data with a common Y scale but different X scales such as page views vs. unique visotors over time. Implementing this functionality in Emprise JavaScript Charts is as simple as setting the x_axis or y_axis property within a series to the side on the chart the scale should be displayed.

Source Code

1. <script type="text/javascript">
3.   var chart = new EJSC.Chart("myChart1a", {
4.     // Define the properties for the bottom (common) axis  
5.     axis_bottom: {
6.       caption: "Date",
7.       formatter: new EJSC.DateFormatter({ format_string: "MM/DD" })
8.     },
9.     // Define the left axis, min/max_extreme are used to control the scale
10.     // and make sure it matches up nicely with the left as far as grid lines
11.     // and tick marks
12.     axis_left: {
13.       caption: "Pages",
14.       min_extreme: 0,
15.       max_extreme: 1000
16.     },
17.     // Define the right axis, again setting manual extremes so that the ticks
18.     // align themselves nicely. This is not required for the axes to work but
19.     // if these numbers are available it will make the chart look better
20.     axis_right: {
21.       caption: "Visitors",
22.       min_extreme: 0,
23.       max_extreme: 100,
24.       // Since we've aligned the scales, there is no need to show two sets
25.       // of grid lines, so hide this axis'
26.       grid: {
27.         show: false
28.       }
29.     }
30.   });
31.   // Create and add the first series. The default x and y axes used are bottom and left
32.   // accordingly so they do not need to be set. If you want to add them for clarity
33.   // it would be:
34.   //   x_axis: "bottom",
35.   //  y_axis: "left"
36.   var hitsSeries = new EJSC.LineSeries(new EJSC.ArrayDataHandler(randomArray("days", 0, 1000)), {
37.     title: "Average Page Views"
38.   });
39.   chart.addSeries(hitsSeries);
40.   // Create and add the second series. The default x axis is already bottom so it does
41.   // not need to be set. If you want to add it for clarity it would be:
42.   //   x_axis: "bottom"
43.   // We have to manually set the y_axis in order for it to be show up
44.   var visitorsSeries = new EJSC.LineSeries(new EJSC.ArrayDataHandler(randomArray("days", 0, 100)), {
45.     title: "Unique Visitors",
46.     y_axis: "right"
47.   });
48.   chart.addSeries(visitorsSeries);
50. </script>