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 create a chart bound to specific ViewData item.
For detailed implementation, please take a look at the Aspx 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>
<div>
<%= Html.JQChart()
.Chart<SamplesBrowser.Models.ChartData>("ChartData")
.ID("jqChart")
.Width(500)
.Height(300)
.Title("Chart Title")
.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");
}))
.Animation(TimeSpan.FromSeconds(1))
.Shadows(true)
.Series(series =>
{
series.Column().Title("Column 1")
.XValues(el => el.Label)
.YValues(el => el.Value1)
.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");
}));
series.Column().Title("Column 2")
.XValues(el => el.Label)
.YValues(el => el.Value2)
.FillStyle(background => background.LinearGradient(0, 0, 1, 0).ColorStops(stop =>
{
stop.Add(0, "#eea151");
stop.Add(0.49, "#ea8f44");
stop.Add(0.5, "#e67e28");
stop.Add(1, "#e06818");
}));
}
)
.Render()%>
</div>
</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>
<div>
@(Html.JQChart()
.Chart<SamplesBrowser.Models.ChartData>("ChartData")
.ID("jqChart")
.Width(500)
.Height(300)
.Title("Chart Title")
.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");
}))
.Animation(TimeSpan.FromSeconds(1))
.Shadows(true)
.Series(series =>
{
series.Column().Title("Column 1")
.XValues(el => el.Label)
.YValues(el => el.Value1)
.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");
}));
series.Column().Title("Column 2")
.XValues(el => el.Label)
.YValues(el => el.Value2)
.FillStyle(background => background.LinearGradient(0, 0, 1, 0).ColorStops(stop =>
{
stop.Add(0, "#eea151");
stop.Add(0.49, "#ea8f44");
stop.Add(0.5, "#e67e28");
stop.Add(1, "#e06818");
}));
}
)
.Render()
)
</div>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace SamplesBrowser.Models
{
public class ChartData
{
public static List<ChartData> GetData()
{
var data = new List<ChartData>();
data.Add(new ChartData("A", 46, 78));
data.Add(new ChartData("B", 35, 72));
data.Add(new ChartData("C", 68, 86));
data.Add(new ChartData("D", 30, 23));
data.Add(new ChartData("E", 27, 70));
data.Add(new ChartData("F", 85, 60));
data.Add(new ChartData("D", 43, 88));
data.Add(new ChartData("H", 29, 22));
return data;
}
public static List<ChartData> GetLineAreaChartData()
{
var data = new List<ChartData>();
data.Add(new ChartData("A", 56, 62));
data.Add(new ChartData("B", 30, 70));
data.Add(new ChartData("C", 58, 68));
data.Add(new ChartData("D", 65, 54));
data.Add(new ChartData("E", 40, 52));
data.Add(new ChartData("F", 36, 60));
data.Add(new ChartData("D", 70, 48));
return data;
}
public static List<ChartData> GetMultipleAxesSampleData()
{
var data = new List<ChartData>();
data.Add(new ChartData("A", 1, 40));
data.Add(new ChartData("B", 4, 60));
data.Add(new ChartData("C", 3, 62));
data.Add(new ChartData("D", 5, 52));
data.Add(new ChartData("E", 2, 70));
data.Add(new ChartData("F", 1, 75));
return data;
}
public static List<ChartData> GetPieChartData()
{
var data = new List<ChartData>();
data.Add(new ChartData("United States", 65));
data.Add(new ChartData("United Kingdom", 58));
data.Add(new ChartData("Germany", 30));
data.Add(new ChartData("India", 60));
data.Add(new ChartData("Russia", 65));
data.Add(new ChartData("China", 75));
return data;
}
public static List<ChartData> GetFunnelChartData()
{
var data = new List<ChartData>();
data.Add(new ChartData("United States", 650));
data.Add(new ChartData("United Kingdom", 530));
data.Add(new ChartData("Germany", 440));
data.Add(new ChartData("India", 280));
data.Add(new ChartData("Russia", 150));
data.Add(new ChartData("China", 75));
return data;
}
public static List<ChartData> GetPyramidChartData()
{
var data = new List<ChartData>();
data.Add(new ChartData("United States", 200));
data.Add(new ChartData("United Kingdom", 220));
data.Add(new ChartData("Germany", 260));
data.Add(new ChartData("India", 280));
data.Add(new ChartData("Russia", 450));
data.Add(new ChartData("China", 600));
return data;
}
public static List<ChartData> GetCategoryAxisSampleChartData()
{
var data = new List<ChartData>();
data.Add(new ChartData("Category 1", 70));
data.Add(new ChartData("Category 2", 40));
data.Add(new ChartData("Category 3", 85));
data.Add(new ChartData("Category 4", 50));
data.Add(new ChartData("Category 5", 25));
data.Add(new ChartData("Category 6", 40));
return data;
}
public static List<ChartData> GetLogarithmicSampleChartData()
{
var data = new List<ChartData>();
data.Add(new ChartData("A", 5));
data.Add(new ChartData("B", 50));
data.Add(new ChartData("C", 500));
data.Add(new ChartData("D", 5000));
data.Add(new ChartData("E", 50000));
return data;
}
public ChartData(string label, double value1)
{
this.Label = label;
this.Value1 = value1;
}
public ChartData(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 ViewDataItemBinding()
{
this.ViewData["ChartData"] = ChartData.GetData();
return View();
}
}
}
|
Follow us on Twitter