Features

ColumnVolume

ColumnVolume

ColumnVolume charts are similar to Column charts, except that they accept a second value, volume, which dictates the width of each bar.

Features

Chart Types
Interaction
Analytics

Description

ColumnVolume charts are similar to Column charts, except that they accept a second value, volume, which dictates the width of each bar.

using FinancialChartExplorer.Models;
using Microsoft.AspNetCore.Mvc;

namespace FinancialChartExplorer.Controllers
{
    public partial class HomeController : Controller
    {
        public ActionResult ColumnVolume()
        {
            var model = BoxData.GetDataFromJson();
            ViewBag.DemoSettingsModel = new ClientSettingsModel() { };
            ViewBag.ChartType = C1.Web.Mvc.Finance.ChartType.ColumnVolume;
            return View(model);
        }
    }
}
@model List<FinanceData>
@{
    ViewBag.DemoSettings = false;
    var chartType = ViewBag.ChartType;
    ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;
}

<script type="text/javascript">
    c1.documentReady(function () {
        c1.getExtender(wijmo.Control.getControl("#rs"), "RangeSelector").min = 69.5;
    });
</script>

<c1-financial-chart id="@demoSettingsModel.ControlId" binding-x="X" chart-type="@chartType">
    <c1-items-source source-collection="@Model"></c1-items-source>
    <c1-financial-chart-series binding="High,Low,Open,Close,Volume" name="BOX"></c1-financial-chart-series>
    <c1-flex-chart-tooltip content="tooltip"></c1-flex-chart-tooltip>
</c1-financial-chart>

@Html.Partial("_RangeSelector")

@section Description{
    <p>@Html.Raw(Home.ColumnVolume_Text0)</p>
}
@section Summary{
    <p>@Html.Raw(Home.ColumnVolume_Text1)</p>
}