Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
@(Html.DevExtreme().Chart()
.ID("chart")
.Palette(VizPalette.HarmonyLight)
.Series(s => {
s.Add().ArgumentField("Arg").ValueField("Y1");
s.Add().ArgumentField("Arg").ValueField("Y2");
})
.ArgumentAxis(a => a
.VisualRange(range => range.StartValue(300).EndValue(500))
)
.ScrollBar(s => s.Visible(true))
.ZoomAndPan(z => z.ArgumentAxis(ChartZoomAndPanMode.Both))
.Legend(l => l.Visible(false))
.DataSource(Model)
)
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult ZoomingAndScrolling() {
return View(SampleData.PointsData);
}
}
}
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<object> PointsData = new[] {
new { Arg = 10, Y1 = -12, Y2 = 10, Y3 = 32 },
new { Arg = 20, Y1 = -32, Y2 = 30, Y3 = 12 },
new { Arg = 40, Y1 = -20, Y2 = 20, Y3 = 30 },
new { Arg = 50, Y1 = -39, Y2 = 50, Y3 = 19 },
new { Arg = 60, Y1 = -10, Y2 = 10, Y3 = 15 },
new { Arg = 75, Y1 = 10, Y2 = 10, Y3 = 15 },
new { Arg = 80, Y1 = 30, Y2 = 50, Y3 = 13 },
new { Arg = 90, Y1 = 40, Y2 = 50, Y3 = 14 },
new { Arg = 100, Y1 = 50, Y2 = 90, Y3 = 90 },
new { Arg = 105, Y1 = 40, Y2 = 175, Y3 = 120 },
new { Arg = 110, Y1 = -12, Y2 = 10, Y3 = 32 },
new { Arg = 120, Y1 = -32, Y2 = 30, Y3 = 12 },
new { Arg = 130, Y1 = -20, Y2 = 20, Y3 = 30 },
new { Arg = 140, Y1 = -12, Y2 = 10, Y3 = 32 },
new { Arg = 150, Y1 = -32, Y2 = 30, Y3 = 12 },
new { Arg = 160, Y1 = -20, Y2 = 20, Y3 = 30 },
new { Arg = 170, Y1 = -39, Y2 = 50, Y3 = 19 },
new { Arg = 180, Y1 = -10, Y2 = 10, Y3 = 15 },
new { Arg = 185, Y1 = 10, Y2 = 10, Y3 = 15 },
new { Arg = 190, Y1 = 30, Y2 = 100, Y3 = 13 },
new { Arg = 200, Y1 = 40, Y2 = 110, Y3 = 14 },
new { Arg = 210, Y1 = 50, Y2 = 90, Y3 = 90 },
new { Arg = 220, Y1 = 40, Y2 = 95, Y3 = 120 },
new { Arg = 230, Y1 = -12, Y2 = 10, Y3 = 32 },
new { Arg = 240, Y1 = -32, Y2 = 30, Y3 = 12 },
new { Arg = 255, Y1 = -20, Y2 = 20, Y3 = 30 },
new { Arg = 270, Y1 = -12, Y2 = 10, Y3 = 32 },
new { Arg = 280, Y1 = -32, Y2 = 30, Y3 = 12 },
new { Arg = 290, Y1 = -20, Y2 = 20, Y3 = 30 },
new { Arg = 295, Y1 = -39, Y2 = 50, Y3 = 19 },
new { Arg = 300, Y1 = -10, Y2 = 10, Y3 = 15 },
new { Arg = 310, Y1 = 10, Y2 = 10, Y3 = 15 },
new { Arg = 320, Y1 = 30, Y2 = 100, Y3 = 13 },
new { Arg = 330, Y1 = 40, Y2 = 110, Y3 = 14 },
new { Arg = 340, Y1 = 50, Y2 = 90, Y3 = 90 },
new { Arg = 350, Y1 = 40, Y2 = 95, Y3 = 120 },
new { Arg = 360, Y1 = -12, Y2 = 10, Y3 = 32 },
new { Arg = 367, Y1 = -32, Y2 = 30, Y3 = 12 },
new { Arg = 370, Y1 = -20, Y2 = 20, Y3 = 30 },
new { Arg = 380, Y1 = -12, Y2 = 10, Y3 = 32 },
new { Arg = 390, Y1 = -32, Y2 = 30, Y3 = 12 },
new { Arg = 400, Y1 = -20, Y2 = 20, Y3 = 30 },
new { Arg = 410, Y1 = -39, Y2 = 50, Y3 = 19 },
new { Arg = 420, Y1 = -10, Y2 = 10, Y3 = 15 },
new { Arg = 430, Y1 = 10, Y2 = 10, Y3 = 15 },
new { Arg = 440, Y1 = 30, Y2 = 100, Y3 = 13 },
new { Arg = 450, Y1 = 40, Y2 = 110, Y3 = 14 },
new { Arg = 460, Y1 = 50, Y2 = 90, Y3 = 90 },
new { Arg = 470, Y1 = 40, Y2 = 95, Y3 = 120 },
new { Arg = 480, Y1 = -12, Y2 = 10, Y3 = 32 },
new { Arg = 490, Y1 = -32, Y2 = 30, Y3 = 12 },
new { Arg = 500, Y1 = -20, Y2 = 20, Y3 = 30 },
new { Arg = 510, Y1 = -12, Y2 = 10, Y3 = 32 },
new { Arg = 520, Y1 = -32, Y2 = 30, Y3 = 12 },
new { Arg = 530, Y1 = -20, Y2 = 20, Y3 = 30 },
new { Arg = 540, Y1 = -39, Y2 = 50, Y3 = 19 },
new { Arg = 550, Y1 = -10, Y2 = 10, Y3 = 15 },
new { Arg = 555, Y1 = 10, Y2 = 10, Y3 = 15 },
new { Arg = 560, Y1 = 30, Y2 = 100, Y3 = 13 },
new { Arg = 570, Y1 = 40, Y2 = 110, Y3 = 14 },
new { Arg = 580, Y1 = 50, Y2 = 90, Y3 = 90 },
new { Arg = 590, Y1 = 40, Y2 = 95, Y3 = 12 },
new { Arg = 600, Y1 = -12, Y2 = 10, Y3 = 32 },
new { Arg = 610, Y1 = -32, Y2 = 30, Y3 = 12 },
new { Arg = 620, Y1 = -20, Y2 = 20, Y3 = 30 },
new { Arg = 630, Y1 = -12, Y2 = 10, Y3 = 32 },
new { Arg = 640, Y1 = -32, Y2 = 30, Y3 = 12 },
new { Arg = 650, Y1 = -20, Y2 = 20, Y3 = 30 },
new { Arg = 660, Y1 = -39, Y2 = 50, Y3 = 19 },
new { Arg = 670, Y1 = -10, Y2 = 10, Y3 = 15 },
new { Arg = 680, Y1 = 10, Y2 = 10, Y3 = 15 },
new { Arg = 690, Y1 = 30, Y2 = 100, Y3 = 13 },
new { Arg = 700, Y1 = 40, Y2 = 110, Y3 = 14 },
new { Arg = 710, Y1 = 50, Y2 = 90, Y3 = 90 },
new { Arg = 720, Y1 = 40, Y2 = 95, Y3 = 120 },
new { Arg = 730, Y1 = 20, Y2 = 190, Y3 = 130 },
new { Arg = 740, Y1 = -32, Y2 = 30, Y3 = 12 },
new { Arg = 750, Y1 = -20, Y2 = 20, Y3 = 30 },
new { Arg = 760, Y1 = -12, Y2 = 10, Y3 = 32 },
new { Arg = 770, Y1 = -32, Y2 = 30, Y3 = 12 },
new { Arg = 780, Y1 = -20, Y2 = 20, Y3 = 30 },
new { Arg = 790, Y1 = -39, Y2 = 50, Y3 = 19 },
new { Arg = 800, Y1 = -10, Y2 = 10, Y3 = 15 },
new { Arg = 810, Y1 = 10, Y2 = 10, Y3 = 15 },
new { Arg = 820, Y1 = 30, Y2 = 100, Y3 = 13 },
new { Arg = 830, Y1 = 40, Y2 = 110, Y3 = 14 },
new { Arg = 840, Y1 = 50, Y2 = 90, Y3 = 90 },
new { Arg = 850, Y1 = 40, Y2 = 95, Y3 = 120 },
new { Arg = 860, Y1 = -12, Y2 = 10, Y3 = 32 },
new { Arg = 870, Y1 = -32, Y2 = 30, Y3 = 12 },
new { Arg = 880, Y1 = -20, Y2 = 20, Y3 = 30 }
};
}
}
#chart {
height: 440px;
width: 100%;
}