This sample demonstrates how a chart palette can be specified.
For detailed implementation, please take a look at the Aspx code tab.
<%@ Page Language="C#" %>
<%@ Register assembly="JQChart.Web" namespace="JQChart.Web.UI.WebControls" tagprefix="jqChart" %>
<!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="<% = ResolveUrl("~/Scripts/jquery-1.11.1.min.js") %>" type="text/javascript"></script>
<script src="<% = ResolveUrl("~/Scripts/jquery.jqChart.min.js") %>" type="text/javascript"></script>
</head>
<body>
<form runat="server">
<asp:ObjectDataSource ID="ObjectDataSource1"
runat="server"
SelectMethod="GetData"
TypeName="SamplesBrowser.Models.FourSeriesChartData"></asp:ObjectDataSource>
<jqChart:Chart ID="Chart1" Width="500px" Height="300px" runat="server" DataSourceID="ObjectDataSource1">
<Title Text="Custom Colors"></Title>
<Legend Location="Bottom"></Legend>
<Animation Enabled="True" Duration="00:00:01" />
<PaletteColors PaletteColorsType="CustomColors">
<CustomColors>
<jqChart:StringValue Value="#A0522D" />
<jqChart:StringValue Value="#D2691E" />
<jqChart:StringValue Value="#8B0000" />
<jqChart:StringValue Value="#CD853F" />
</CustomColors>
</PaletteColors>
<Axes>
<jqChart:CategoryAxis Location="Bottom" CategoriesField="Label"></jqChart:CategoryAxis>
</Axes>
<Series>
<jqChart:ColumnSeries YValuesField="Value1" Title="Series 1">
</jqChart:ColumnSeries>
<jqChart:ColumnSeries YValuesField="Value2" Title="Series 2">
</jqChart:ColumnSeries>
<jqChart:ColumnSeries YValuesField="Value3" Title="Series 3">
</jqChart:ColumnSeries>
<jqChart:ColumnSeries YValuesField="Value4" Title="Series 4">
</jqChart:ColumnSeries>
</Series>
</jqChart:Chart>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace SamplesBrowser.Models
{
public class FourSeriesChartData
{
public static List<FourSeriesChartData> GetData()
{
var data = new List<FourSeriesChartData>();
data.Add(new FourSeriesChartData("A", 62, 56, 60, 68));
data.Add(new FourSeriesChartData("B", 70, 50, 55, 30));
data.Add(new FourSeriesChartData("C", 68, 62, 42, 56));
data.Add(new FourSeriesChartData("D", 58, 65, 68, 40));
return data;
}
public FourSeriesChartData(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; }
}
}