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 how to specify chart global alpha. The GlobalAlpha specifies
the transparency of the chart. It can be a number between 0 and 1.
0=full transparency, 1=no transparency. 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.BubbleChartData>>" %> <%@ 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("Global Alpha") .GlobalAlpha(0.5) .Series(series => { series.Bubble().Title("Series 1") .XValues(el => el.ValueX1) .YValues(el => el.ValueY1) .SizeValues(el => el.ValueSize1) .FillStyle(background => background.RadialGradient(0.35, 0.35, 0, 0.35, 0.35, 1).ColorStops(stop => { stop.Add(0, "white"); stop.Add(1, "#418CF0"); })); series.Bubble().Title("Series 2") .XValues(el => el.ValueX2) .YValues(el => el.ValueY2) .SizeValues(el => el.ValueSize2) .FillStyle(background => background.RadialGradient(0.35, 0.35, 0, 0.35, 0.35, 1).ColorStops(stop => { stop.Add(0, "white"); stop.Add(1, "#FCB441"); })); } ) .Render()%> </div> </body> </html> @model IEnumerable<SamplesBrowser.Models.BubbleChartData> @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("Global Alpha") .GlobalAlpha(0.5) .Series(series => { series.Bubble().Title("Series 1") .XValues(el => el.ValueX1) .YValues(el => el.ValueY1) .SizeValues(el => el.ValueSize1) .FillStyle(background => background.RadialGradient(0.35, 0.35, 0, 0.35, 0.35, 1).ColorStops(stop => { stop.Add(0, "white"); stop.Add(1, "#418CF0"); })); series.Bubble().Title("Series 2") .XValues(el => el.ValueX2) .YValues(el => el.ValueY2) .SizeValues(el => el.ValueSize2) .FillStyle(background => background.RadialGradient(0.35, 0.35, 0, 0.35, 0.35, 1).ColorStops(stop => { stop.Add(0, "white"); stop.Add(1, "#FCB441"); })); } ) .Render() ) </div> </body> </html> using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace SamplesBrowser.Models { public class BubbleChartData { public static List<BubbleChartData> GetData() { var data = new List<BubbleChartData>(); data.Add(new BubbleChartData(1, 15, 8, 1, 9, 15)); data.Add(new BubbleChartData(2, 18, 4, 2, 8, 24)); data.Add(new BubbleChartData(3, 15, 8, 3, 12, 10)); data.Add(new BubbleChartData(4, 16, 13, 4, 9, 14)); data.Add(new BubbleChartData(5, 14, 11, 5, 7, 12)); return data; } public BubbleChartData(double valueX1, double valueY1, double valueSize1, double valueX2, double valueY2, double valueSize2) { this.ValueX1 = valueX1; this.ValueY1 = valueY1; this.ValueSize1 = valueSize1; this.ValueX2 = valueX2; this.ValueY2 = valueY2; this.ValueSize2 = valueSize2; } public double ValueX1 { get; set; } public double ValueY1 { get; set; } public double ValueSize1 { get; set; } public double ValueX2 { get; set; } public double ValueY2 { get; set; } public double ValueSize2 { 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 GlobalAlpha() { return View(BubbleChartData.GetData()); } } } |