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 Radar Spline Area 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.RadarChartData>>" %> <%@ 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("Radar Spline Area Chart") .Border(border => border.StrokeStyle("#6ba851")) .Background(background => background.LinearGradient(0, 0, 0, 1).ColorStops(stop => { stop.Add(0, "#d2e6c9"); stop.Add(1, "white"); })) .Axes(axis => { axis.LinearRadiusAxis().MajorTickMarks(mark => mark.Visible(true)) .InnerExtent(0); } ) .Series(series => { series.RadarSplineArea().Title("Radar 1") .XValues(el => el.Label) .YValues(el => el.Value1) .FillStyle("rgba(65,140,240,0.75)"); series.RadarSplineArea().Title("Radar 2") .XValues(el => el.Label) .YValues(el => el.Value2) .FillStyle("rgba(252,180,65,0.75)"); } ) .Render()%> </div> </body> </html> @model IEnumerable<SamplesBrowser.Models.RadarChartData> @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("Radar Spline Area Chart") .Border(border => border.StrokeStyle("#6ba851")) .Background(background => background.LinearGradient(0, 0, 0, 1).ColorStops(stop => { stop.Add(0, "#d2e6c9"); stop.Add(1, "white"); })) .Axes(axis => { axis.LinearRadiusAxis().MajorTickMarks(mark => mark.Visible(true)) .InnerExtent(0); } ) .Series(series => { series.RadarSplineArea().Title("Radar 1") .XValues(el => el.Label) .YValues(el => el.Value1) .FillStyle("rgba(65,140,240,0.75)"); series.RadarSplineArea().Title("Radar 2") .XValues(el => el.Label) .YValues(el => el.Value2) .FillStyle("rgba(252,180,65,0.75)"); } ) .Render() ) </div> </body> </html> using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace SamplesBrowser.Models { public class RadarChartData { public static List<RadarChartData> GetData() { var data = new List<RadarChartData>(); data.Add(new RadarChartData("France", 65.62, 46.45)); data.Add(new RadarChartData("Canada", 75.54, 63.78)); data.Add(new RadarChartData("Germany", 60.45, 86.45)); data.Add(new RadarChartData("USA", 34.73, 30.76)); data.Add(new RadarChartData("Italy", 85.42, 23.79)); data.Add(new RadarChartData("Spain", 55.9, 35.67)); data.Add(new RadarChartData("Russia", 63.6, 89.56)); data.Add(new RadarChartData("Sweden", 55.1, 67.45)); data.Add(new RadarChartData("Japan", 77.2, 38.98)); return data; } public RadarChartData(string label, double value1, double value2) { this.Label = label; this.Value1 = value1; this.Value2 = value2; } public string Label { get; set; } public double Value1 { get; set; } public double Value2 { 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 RadarSplineAreaChart() { return View(RadarChartData.GetData()); } } } |