Your search did not match any results.

Scatter

Documentation

Scatter charts can be used whenever you need to allow the user to draw their own conclusions about information displayed within the chart.

Backend API
@(Html.DevExtreme().Chart() .ID("chart") .CommonSeriesSettings(s => s.Type(SeriesType.Scatter)) .Series(s => { s.Add().ArgumentField("X1").ValueField("Y1"); s.Add().ArgumentField("X2").ValueField("Y2").Point(p => p .Symbol(PointSymbol.TriangleDown) ); }) .ArgumentAxis(a => a .Grid(g => g.Visible(true)) .TickInterval(5) .MinorGrid(g => g.Visible(true)) ) .ValueAxis(a => a.Add().TickInterval(50)) .Legend(l => l.Visible(false)) .CommonPaneSettings(s => s.Border(b => b.Visible(true))) .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 Scatter() { return View(SampleData.GetScatterData()); } } }
using System; using System.Collections.Generic; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static IEnumerable<object> GetScatterData() { var rnd = new Random(); double b1 = rnd.Next(-100, 100) / 10; double b2 = rnd.Next(-100, 100) / 10; double k1 = rnd.Next(-100, 100) / 10; double k2 = rnd.Next(-100, 100) / 10; if(k1 < 0.1 && k1 >= 0) k1 = 0.1; if(k1 > -0.1 && k1 < 0) k1 = -0.1; if(k2 < 0.1 && k2 >= 0) k2 = 0.1; if(k2 > -0.1 && k2 < 0) k2 = -0.1; double deviation1 = Math.Round(k1 * 8); double deviation2 = Math.Round(k2 * 8); for(int i = 0; i < 30; i++) { var isNegativeDelta = rnd.Next(0, 1) == 0; double delta1 = deviation1 * rnd.NextDouble(); double delta2 = deviation2 * rnd.NextDouble(); if(isNegativeDelta) { delta1 = -delta1; delta2 = -delta2; } double x1 = rnd.Next(1, 20); double x2 = rnd.Next(1, 20); double y1 = k1 * x1 + b1 + delta1; double y2 = k2 * x2 + b2 + delta2; yield return new { X1 = x1, Y1 = y1, X2 = x2, Y2 = y2 }; } } } }
#chart { height: 440px; }