@(Html.DevExtreme().Chart() .ID("crucible-chart") .Panes(p=> { p.Add().Name("Buffer") .Height(400); p.Add().Name("Delivered") .Height(200); }) .DataSource(ds => ds .WebApi() .Area("") .Controller("TSDB") .LoadAction("SelectCruciblesInBufferStatistics") .LoadParams(new { start = new JS("getStartDate"), end = new JS("getEndDate") }) .OnLoaded(@<text> function () { $("#crucible-chart").dxChart("option", "argumentAxis.visualRange.startValue", new Date(getStartDate())); $("#crucible-chart").dxChart("option", "argumentAxis.visualRange.endValue", new Date(getEndDate())); } </text>)) .Margin(m => m.Bottom(20)) .ArgumentAxis(a => a .MinorTickInterval(VizTimeInterval.Minute) .TickInterval(VizTimeInterval.Hour) .ValueMarginsEnabled(false) .ArgumentType(ChartDataType.DateTime) .Label(l => l .Format("HH:mm") .OverlappingBehavior(OverlappingBehavior.Rotate) .RotationAngle(-45)) .DiscreteAxisDivisionMode(DiscreteAxisDivisionMode.CrossLabels) .Grid(g => g.Visible(true) )) .ValueAxis(a => { a.Add() .Name("Total") .Pane("Buffer") .Position(Position.Left) .EndOnTick(false) .VisualRange(new double[] { 0, 5 }) .TickInterval(1) .Grid(g => g.Visible(true)) .Title(t => t.Text("Fulle digler i buffer")); a.Add() .Name("Delivered") .Pane("Buffer") .Position(Position.Right) .EndOnTick(true) .ValueMarginsEnabled(true) .TickInterval(1) .Grid(g => g.Visible(false)) .Title(t => t.Text("Digler levert skift totalt")); a.Add() .Name("DeliveredHour") .Pane("Delivered") .Position(Position.Left) .EndOnTick(true) .ValueMarginsEnabled(true) .TickInterval(1) .Grid(g => g.Visible(false)) .Title(t => t.Text("Digler levert skift totalt")); }) .Export(e => e.Enabled(false)) .Tooltip(t => t .Enabled(true) .ContentTemplate(@<text> <div class='state-tooltip'> <div> <span class='caption'>Kl.:</span>: <%- addLeadingZero(point.data.EventTime.getHours())+":"+addLeadingZero(point.data.EventTime.getMinutes()) %> </div> <div> <%- formatNumber(value) %> <span class='caption'>Digle(r)</span> </div> </div> </text>) ) .ZoomAndPan(z => z .ArgumentAxis(ChartZoomAndPanMode.Both) .ValueAxis(ChartZoomAndPanMode.None) .DragToZoom(true) .AllowMouseWheel(true) .PanKey(EventKeyModifier.Shift)) .Animation(a => a.Enabled(false)) .Series(s => { s.Add().ValueField("InBuffer") .Pane("Buffer") .Name("I Buffer") .ArgumentField("EventTime") .Type(SeriesType.StepArea) .Point(p => p.Symbol(PointSymbol.Square) .Size(6)) .Width(3); s.Add().ValueField("SumDeliveredTotalizer") .Pane("Buffer") .ArgumentField("EventTime") .Axis("Delivered") .Name("Levert") .Type(SeriesType.StepLine) .Point(p => p.Symbol(PointSymbol.Cross) .Visible(false) .Size(6)) .Width(3); s.Add().ValueField("SumDeliveredTotalizerHours") .Pane("Delivered") .Name("Levert siste time") .ArgumentField("ToHour") .Type(SeriesType.Bar) .BarWidth(40) .BarOverlapGroup("ToHour"); }) .Legend(l => l .VerticalAlignment(VerticalEdge.Bottom) .HorizontalAlignment(HorizontalAlignment.Center) .ItemTextPosition(Position.Bottom) ) )