Extra Axes

Most charts have two axes, X and Y. This works well as long as all the data on the chart has the same nature and can share the same scale.

But some charts contain series that show different types of data, with different units and scales. The chart below has two series that represent amounts (sales and expenses) and one that represents quantities (downloads).

Plotting all the series against a single Y axis squeezes the first two series against the bottom of the chart.

The easiest way to solve this problem and still using a single chart is to create a secondary Y axis and assign it to the axisY property of the "Downloads" series:

Secondary Y Axis

// This file locates: "Scripts/Lesson/C1FlexChart/AxesExtraAxes.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
 
    // create and apply extra Y axis for 'Downloads' series
    var axisY2 = new wijmo.chart.Axis();
    axisY2.position = 'Right';
    axisY2.title = 'Downloads (k)';
    axisY2.format = 'n0,';
    axisY2.min = 0;
    axisY2.axisLine = true;
    getSeries('Downloads').axisY = axisY2;
 
    // toggle extra axis
    document.getElementById('secondaryAxis').addEventListener('click', function (e) {
        getSeries('Downloads').axisY = e.target.checked ? axisY2 : null;
    });
 
    // get a series by its binding
    function getSeries(binding) {
        var s = theChart.series;
        for (var i = 0; i < s.length; i++) {
            if (s[i].binding == binding) {
                return s[i];
            }
        }
        return null;
    }
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: AxesExtraAxes
        public ActionResult AxesExtraAxes()
        {
            return View(Models.FlexChartData.GetSales2());
        }
    }
}

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexChart.AxesExtraAxes_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.AxesExtraAxes_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.AxesExtraAxes_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.AxesExtraAxes_Text3)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.AxesExtraAxes_Text4)
</p>
 
<div class="demo-settings">
    <label for="secondaryAxis">@Html.Raw(Resources.C1FlexChart.AxesExtraAxes_Text5)</label>
    <input id="secondaryAxis" type="checkbox" checked="checked">
</div>
 
@(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChart")
    .Bind("Country", Model)
    .Series(sb =>
    {
        sb.Add().Binding("Sales").Name("Sales");
        sb.Add().Binding("Expenses").Name("Expenses");
        sb.Add().Binding("Downloads").Name("Downloads").ChartType(C1.Web.Mvc.Chart.ChartType.LineSymbols);
    })
    .AxisY(y=>y.Format("n0,").Title("Sales/Expenses (US$ k)").AxisLine(true))
)