Chart DataPerformance !!!Bar and Column ChartsLine and Area ChartsPie and Funnel ChartsScatter and Bubble ChartsRadar and Polar ChartsFinancial ChartsGantt ChartsCombinational ChartsDynamic ChartsWorking with Chart AxesChart FeaturesCustomizing ChartClient-Side Events |
This sample demonstrates the Scatter chart type.
For detailed implementation, please take a look at the Aspx, Razor and Controller code tabs. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<SamplesBrowser.Models.ScatterChartData>>" %> <%@ Import Namespace="JQChart.Web.Mvc" %> <!DOCTYPE html> <html> <head runat="server"> <title></title> <link rel="stylesheet" type="text/css" href="~/Content/jquery.jqChart.css" /> <link rel="stylesheet" type="text/css" href="~/Content/themes/le-frog/jquery-ui-1.8.20.css" /> <script src="<%: Url.Content("~/Scripts/jquery-1.11.1.min.js") %>" type="text/javascript"></script> <script src="<%: Url.Content("~/Scripts/jquery.jqChart.min.js") %>" type="text/javascript"></script> <body> <div> <%= Html.JQChart() .Chart(Model) .ID("jqChart") .Width(500) .Height(300) .Title("Scatter Chart") .Animation(TimeSpan.FromSeconds(1)) .Series(series => { series.Scatter().Title("Scatter 1") .XValues(el => el.ValueX) .YValues(el => el.ValueY1) .Markers(marker => marker.MarkerType(MarkerType.Diamond).Size(8)); series.Scatter().Title("Scatter 2") .XValues(el => el.ValueX) .YValues(el => el.ValueY2) .Markers(marker => marker.MarkerType(MarkerType.Rectangle).Size(8)); } ) .Render()%> </div> </body> </html> @model IEnumerable<SamplesBrowser.Models.ScatterChartData> @using JQChart.Web.Mvc <!DOCTYPE html> <html> <head runat="server"> <title></title> <link rel="stylesheet" type="text/css" href="~/Content/jquery.jqChart.css" /> <link rel="stylesheet" type="text/css" href="~/Content/themes/le-frog/jquery-ui-1.8.20.css" /> <script src="@Url.Content("~/Scripts/jquery-1.11.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.jqChart.min.js")" type="text/javascript"></script> <body> <div> @(Html.JQChart() .Chart(Model) .ID("jqChart") .Width(500) .Height(300) .Title("Scatter Chart") .Animation(TimeSpan.FromSeconds(1)) .Series(series => { series.Scatter().Title("Scatter 1") .XValues(el => el.ValueX) .YValues(el => el.ValueY1) .Markers(marker => marker.MarkerType(MarkerType.Diamond).Size(8)); series.Scatter().Title("Scatter 2") .XValues(el => el.ValueX) .YValues(el => el.ValueY2) .Markers(marker => marker.MarkerType(MarkerType.Rectangle).Size(8)); } ) .Render() ) </div> </body> </html> using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace SamplesBrowser.Models { public class ScatterChartData { public static List<ScatterChartData> GetRandom() { var data = new List<ScatterChartData>(); Random rnd = new Random(); for (var i = 0; i < 20; i++) { data.Add(new ScatterChartData(i, rnd.Next(0, 100))); } return data; } public static List<ScatterChartData> GetData() { var data = new List<ScatterChartData>(); Random rnd = new Random(); int yValue1 = 100; int yValue2 = 20; for (var i = 0; i < 20; i++) { yValue1 += (int)Math.Round(rnd.NextDouble() * 20 - 10); yValue2 += (int)Math.Round(rnd.NextDouble() * 20 - 10); data.Add(new ScatterChartData(i, yValue1, yValue2)); } return data; } public static List<ScatterChartData> GetSplineScatterSampleData() { var data = new List<ScatterChartData>(); data.Add(new ScatterChartData(1, 46, 69)); data.Add(new ScatterChartData(2, 48, 57)); data.Add(new ScatterChartData(3, 68, 86)); data.Add(new ScatterChartData(4, 30, 70)); data.Add(new ScatterChartData(5, 55, 70)); data.Add(new ScatterChartData(6, 85, 60)); data.Add(new ScatterChartData(7, 43, 88)); data.Add(new ScatterChartData(8, 29, 60)); return data; } public ScatterChartData(double valueX, double valueY) { this.ValueX = valueX; this.ValueY1 = valueY; } public ScatterChartData(double valueX, double valueY1, double valueY2) { this.ValueX = valueX; this.ValueY1 = valueY1; this.ValueY2 = valueY2; } public double ValueX { get; set; } public double ValueY1 { get; set; } public double ValueY2 { get; set; } } } using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using SamplesBrowser.Models; namespace SamplesBrowser.Controllers { public class ChartController : Controller { public ActionResult ScatterChart() { return View(ScatterChartData.GetData()); } } } |