Chart User Interface component for ASP.NET Core MVC Edit
The Chart is an easy to use charting component which uses W3C standards like HTML5, CSS and SVG. The Chart provides optimal chart rendering performance and high quality visualization across browsers and devices (PCs, Laptops, Tablets and Mobile phones). It automatically detects the browser capabilities and uses SVG or HTML5 rendering with hardware acceleration (when available) in modern browsers (IE9+, Firefox, Chrome, Opera) and VML rendering in IE8 and earlier browsers. The ability to render SVG, HTML5 and VML makes jqxChart an ideal choice for adding charting capabilities in your web sites and applications. No browser plug-ins are required. Try our Chart Studio - cloud solution for visual editing and hosting of interactive charts!
The Chart tag helper supports several common chart types. You can easily plot series of different types on a common chart. A type must be specified for each series group. Currently jqxChart supports the following series:
ASP .NET Core MVC Tag Helpers Demos page.
Install the Tag Helper's Nuget package from https://www.nuget.org/packages/Chart.AspNetCore.Mvc/
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, jQWidgets.AspNetCore.Mvc.TagHelpers
@inject Microsoft.ApplicationInsights.Extensibility.TelemetryConfiguration TelemetryConfiguration
Click Build in the top menu bar of Visual Studio, then click Build Solution to Build the solution
We can now add a Tag Helper to one of the views (pages). For example, we will add the Tag Helper to Views\Home\About.cshtml. While typing, IntelliSense suggest the existing Tag Helpers:
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@model IEnumerable<jQWidgets.AspNet.Core.Models.BrowserShare>
@{
ViewData["Title"] = "ASP .NET MVC Pie Chart Example";
Padding padding = new Padding() { Left = 5, Top = 5, Right = 5, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 0, Top = 0, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle() { Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
}
<label>ASP .NET Core MVC Chart Tag Helper Example</label><br/><br/>
<jqx-chart style="width: 850px; height: 500px;" color-scheme="scheme02" padding="padding" title-padding="titlePadding" title="Desktop browsers share" description="(source: wikipedia.org)" show-legend="false" legend-position="legendPosition" source="Model">
<jqx-chart-series-groups>
<jqx-chart-serie-group show-labels="true" type=@SerieType.Pie>
<jqx-chart-series>
<jqx-chart-serie datafield="Share" display-text="Browser" label-radius="120" initial-angle="15" radius="170" center-offset="0" format-settings="formatSettings">
</jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
jqx-chart-series-groups
tag helper should be defined within the jqx-chart
tag helper and
defines the Chart series groups collection. jqx-chart-serie-group
tag helper should be
defined within the jqx-chart-series-groups
tag helper and defines a Chart serie group.
jqx-chart-series
tag helper should be defined within the jqx-chart-serie-group
tag helper
and defines the Chart series collection.
jqx-chart-serie
tag helper should be defined within the jqx-chart-series
tag helper and defines a Chart serie.
The for
and radiusFor
members can be used for model binding.
jqx-chart-x-axis
tag helper should be defined within the jqx-chart
tag helper and defines the Chart's X Axis.
The for member can be used for model binding.
jqx-chart-value-axis
tag helper should be defined within the jqx-chart
tag helper and defines the Chart's Value Axis.
jqx-chart-title
tag helper should be defined within the jqx-chart-value-axis
tag helper and defines the Chart's Title.
jqx-chart-labels
tag helper should be defined within the jqx-chart-value-axis
tag helper and defines the Chart's Labels.
jqx-chart-range-selector
tag helper should be defined within the jqx-chart
tag helper and defines the Chart's Range selector.
@model IEnumerable<jQWidgets.AspNet.Core.Models.ChartSalesDataItem>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
ViewData["Title"] = "ASP .NET MVC Bubble Chart Example";
var item = Model.FirstOrDefault();
Padding padding = new Padding() { Left = 5, Top = 5, Right = 5, Bottom = 5 };
Padding titlePadding = new Padding() { Left = 90, Top = 0, Right = 0, Bottom = 10 };
FormatSettings formatSettings = new FormatSettings() { Prefix = "$", ThousandsSeparator="," };
}
<label>ASP .NET MVC Core Bubble Chart Example</label><br/><br/>
<jqx-chart style="width: 850px; height: 500px;" color-scheme="scheme02" show-legend="true" padding="padding" title-padding="titlePadding" title="Sales by City in Q1 and Q2, and YoY sales growth"
description="(the size of the circles represents relative YoY growth)" source="Model">
<jqx-chart-x-axis values-on-ticks="false" for="@item.City" ></jqx-chart-x-axis>
<jqx-chart-value-axis unit-interval="50000" min-value="50000" max-value="350000">
<jqx-chart-title text="Sales ($)"></jqx-chart-title>
<jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right" format-settings="formatSettings"></jqx-chart-labels>
</jqx-chart-value-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group type="SerieType.Bubble">
<jqx-chart-series>
<jqx-chart-serie for="@item.SalesQ1" radius-for="@item.YoYGrowthQ1" min-radius="10" max-radius="30" display-text="Sales in Q1"></jqx-chart-serie>
<jqx-chart-serie for="@item.SalesQ2" radius-for="@item.YoYGrowthQ2" min-radius="10" max-radius="30" display-text="Sales in Q2"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
Free for non-commercial purposes. For commercial usage, please visit http://www.jqwidgets.com/license/.
If you have a feature request or bug report, leave an issue on the issues page or send a pull request. For general questions and comments, use the http://www.jqwidgets.com/community/forum/asp-net-mvc/ forum.