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 100% Stacked Bar 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.StackedChartData>>" %> <%@ 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) .Border(el => el.Padding(10)) .Title("100% Stacked Bar Chart") .Legend(legend => legend.Location(LegendLocation.Bottom)) .Animation(TimeSpan.FromSeconds(1)) .Shadows(true) .Axes(axis => { axis.CategoryAxis(Location.Left).Categories(el => el.Label); axis.LinearAxis(Location.Bottom).ExtendRangeToOrigin(true) .Labels(el => el.StringFormat("%d%%")); } ) .Series(series => { series.Stacked100Bar() .Title("Stacked 1") .YValues(el => el.Value1) .Labels(label => label.ValueType(LabelValueType.Percentage).StringFormat("%.2f%%").Font("12px sans-serif")); series.Stacked100Bar() .Title("Stacked 2") .YValues(el => el.Value2) .Labels(label => label.ValueType(LabelValueType.Percentage).StringFormat("%.2f%%").Font("12px sans-serif")); series.Stacked100Bar() .Title("Stacked 3") .YValues(el => el.Value3) .Labels(label => label.ValueType(LabelValueType.Percentage).StringFormat("%.2f%%").Font("12px sans-serif")); } ) .Render()%> </div> </body> </html> @model IEnumerable<SamplesBrowser.Models.StackedChartData> @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) .Border(el => el.Padding(10)) .Title("100% Stacked Bar Chart") .Legend(legend => legend.Location(LegendLocation.Bottom)) .Animation(TimeSpan.FromSeconds(1)) .Shadows(true) .Axes(axis => { axis.CategoryAxis(Location.Left).Categories(el => el.Label); axis.LinearAxis(Location.Bottom).ExtendRangeToOrigin(true) .Labels(el => el.StringFormat("%d%%")); } ) .Series(series => { series.Stacked100Bar() .Title("Stacked 1") .YValues(el => el.Value1) .Labels(label => label.ValueType(LabelValueType.Percentage).StringFormat("%.2f%%").Font("12px sans-serif")); series.Stacked100Bar() .Title("Stacked 2") .YValues(el => el.Value2) .Labels(label => label.ValueType(LabelValueType.Percentage).StringFormat("%.2f%%").Font("12px sans-serif")); series.Stacked100Bar() .Title("Stacked 3") .YValues(el => el.Value3) .Labels(label => label.ValueType(LabelValueType.Percentage).StringFormat("%.2f%%").Font("12px sans-serif")); } ) .Render() ) </div> </body> </html> using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace SamplesBrowser.Models { public class StackedChartData { public static List<StackedChartData> GetData() { var data = new List<StackedChartData>(); data.Add(new StackedChartData("A", 62, 56, 33)); data.Add(new StackedChartData("B", 70, 30, 42)); data.Add(new StackedChartData("C", 68, 62, 54)); data.Add(new StackedChartData("D", 58, 65, 23)); data.Add(new StackedChartData("E", 52, 40, 54)); data.Add(new StackedChartData("F", 60, 36, 47)); data.Add(new StackedChartData("G", 48, 70, 61)); return data; } public static List<StackedChartData> GetGroupData() { var data = new List<StackedChartData>(); data.Add(new StackedChartData("2000", 62, 56, 33, 43)); data.Add(new StackedChartData("2001", 70, 30, 42, 52)); data.Add(new StackedChartData("2002", 68, 62, 54, 64)); data.Add(new StackedChartData("2003", 58, 65, 23, 33)); return data; } public StackedChartData(string label, double value1, double value2, double value3) { this.Label = label; this.Value1 = value1; this.Value2 = value2; this.Value3 = value3; } public StackedChartData(string label, double value1, double value2, double value3, double value4) { this.Label = label; this.Value1 = value1; this.Value2 = value2; this.Value3 = value3; this.Value4 = value4; } public string Label { get; set; } public double Value1 { get; set; } public double Value2 { get; set; } public double Value3 { get; set; } public double Value4 { 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 Stacked100BarChart() { return View(StackedChartData.GetData()); } } } |