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 change a spcific chart options.
With .jqChart("option", optionName, [value]) method you can get or set any jqChart option. If no value is specified, will act as a getter. For detailed implementation, please take a look at the Aspx, Razor and Controller code tabs. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> <%@ 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> <%= Html.JQChart() .Chart() .ID("jqChart") .Width(500) .Height(300) .Title("Change Chart Options") .Legend(legend => legend.Title("Legend")) .Border(border => border.StrokeStyle("#6ba851")) .Background(background => background.LinearGradient(0, 0, 0, 1).ColorStops(stop => { stop.Add(0, "#d2e6c9"); stop.Add(1, "white"); })) .Series(series => { series.Column().Title("Column") .XValues(new string[] { "A", "B", "C", "D", "E", "F" }) .YValues(new double[] { 70, 40, 85, 50, 25, 40 }) .FillStyle(background => background.LinearGradient(0, 0, 1, 0).ColorStops(stop => { stop.Add(0, "#65c2e8"); stop.Add(0.49, "#55b3e1"); stop.Add(0.5, "#3ba6dc"); stop.Add(1, "#2794d4"); })); } ) .Render()%> <br /> <input id="buttonBackground" type="button" value="Change Background" /> <input id="buttonTitle" type="button" value="Change Title" /> <br /> <script lang="javascript" type="text/javascript"> $(document).ready(function () { $('#buttonBackground').click(function () { $('#jqChart').jqChart('option', 'background', 'yellow'); }); $('#buttonTitle').click(function () { $('#jqChart').jqChart('option', 'title', { text: 'New Title', fillStyle: 'red' }); }); }); </script> </body> </html> @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> @(Html.JQChart() .Chart() .ID("jqChart") .Width(500) .Height(300) .Title("Change Chart Options") .Legend(legend => legend.Title("Legend")) .Border(border => border.StrokeStyle("#6ba851")) .Background(background => background.LinearGradient(0, 0, 0, 1).ColorStops(stop => { stop.Add(0, "#d2e6c9"); stop.Add(1, "white"); })) .Series(series => { series.Column().Title("Column") .XValues(new string[] { "A", "B", "C", "D", "E", "F" }) .YValues(new double[] { 70, 40, 85, 50, 25, 40 }) .FillStyle(background => background.LinearGradient(0, 0, 1, 0).ColorStops(stop => { stop.Add(0, "#65c2e8"); stop.Add(0.49, "#55b3e1"); stop.Add(0.5, "#3ba6dc"); stop.Add(1, "#2794d4"); })); } ) .Render() ) <br /> <input id="buttonBackground" type="button" value="Change Background" /> <input id="buttonTitle" type="button" value="Change Title" /> <br /> <script lang="javascript" type="text/javascript"> $(document).ready(function () { $('#buttonBackground').click(function () { $('#jqChart').jqChart('option', 'background', 'yellow'); }); $('#buttonTitle').click(function () { $('#jqChart').jqChart('option', 'title', { text: 'New Title', fillStyle: 'red' }); }); }); </script> </body> </html> using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace SamplesBrowser.Models { public class EmptyChartModel { } } 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 ChartOptions() { return View(); } } } |