Use Multiple Axes

There may be times when you need to chart complex data that requires multiple axes. The wijcompositechart widget allows you to do just that.

Add the following HTML markup to the body of your page:
Markup
Sample Markup
Copy Code

<div id="wijcompositechart" style="width: 756px; height: 475px"> </div>

Sample Markup	Copy Code
<div id="wijcompositechart" style="width: 756px; height: 475px"> </div>

Include the following script to initialize the widget and populate the chart with data. Note that the y axis option has a y1 axis and a y2 axis value specified:

Sample Script	Copy Code
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijcompositechart").wijcompositechart({ axis: { y: [{ // main y axis text: "Temperature", compass: "east", autoMin: false, autoMax: false, min: 5, max: 35, textStyle: { fill: "#89A54E" }, labels: { style: { fill: "#89A54E" } } }, { // y1 axis text: "Rainfall", autoMax: false, autoMin: false, min: 0, max: 300 }, { // y2 axis text: "", compass: "east" }], x: { text: "" } }, stacked: false, hint: { content: function () { return this.label + '\n ' + this.y + ''; } }, header: { text: "Hardware Distribution" }, seriesList: [{ type: "column", label: "West", legendEntry: true, data: { x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], y: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }, yAxis: 1 }, { type: "line", fitType: "spline", label: "East", legendEntry: true, data: { x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], y: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7] }, yAxis: 2 }, { type: "line", label: "South", legendEntry: true, data: { x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], y: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, markers: { visible: true, type: "circle" } }] }); }); </script>

Sample Script

Copy Code

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#wijcompositechart").wijcompositechart({
            axis: {
                y: [{
                    // main y axis                        

                    text: "Temperature",
                    compass: "east",
                    autoMin: false,
                    autoMax: false,
                    min: 5,
                    max: 35,
                    textStyle: {
                        fill: "#89A54E"
                    },
                    labels: {
                        style: {
                            fill: "#89A54E"
                        }

                    }
                },
              {
                  // y1 axis                         

                  text: "Rainfall",
                  autoMax: false,
                  autoMin: false,
                  min: 0,
                  max: 300
              },
              {
                  // y2 axis                         

                  text: "",
                  compass: "east"
              }],
                x: {
                    text: ""
                }
            },
            stacked: false,
            hint: {
                content: function () {
                    return this.label + '\n ' + this.y + '';
                }
            },
            header: {
                text: "Hardware Distribution"
            },
            seriesList: [{
                type: "column",
                label: "West",
                legendEntry: true,
                data: {
                    x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    y: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                },
                yAxis: 1
            }, {
                type: "line",
                fitType: "spline",
                label: "East",
                legendEntry: true,
                data: {
                    x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    y: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7]
                },
                yAxis: 2
            }, {
                type: "line",
                label: "South",
                legendEntry: true,
                data: {
                    x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    y: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                },
                markers: {
                    visible: true,
                    type: "circle"
                }
            }]
 
        });
 
    });    
</script>

The above markup and script results in a chart like that in the following image:

Multiple Axes

The line or spline portion of the wijcompositechart can be used as an area chart as well.

For this example, we'll take the yAxis 1 and change it to an area chart by changing the type option from "line" to "area":

Sample Script	Copy Code
yAxis: 1 }, { type: "area", fitType: "spline", label: "East", legendEntry: true, data: { x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], y: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7] },

Sample Script

Copy Code

yAxis: 1
            }, {
                type: "area",
                fitType: "spline",
                label: "East",
                legendEntry: true,
                data: {
                    x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    y: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7]
                },

This one change results in the following:

Area Chart with Multiple Axes

Note: Each set of data for the line chart in the seriesList option uses a different marker type. The available marker types are box, circle, cross, diamond, invertedTri, and tri. The available markers are illustrated in the image below.

BubbleChart with Markers

Widgets

Reference

Concepts