PDA

View Full Version : [CLOSED] And now, what about gradient color in collumn chart?



feanor91
Jun 05, 2012, 11:16 AM
Hello I try to implement gradient in that way, but not sure how to use gradient, and obviously, not in this way (I inspire myself from that http://examples2.ext.net/#/Chart/Column/Browser_Stats/ exemple:



<%@ Page Language="C#" %>

<%@ Import Namespace="Ext.Net.Utilities"%>
<%@ Import Namespace="Panel=Ext.Net.Panel" %>
<%@ Import Namespace="Chart=Ext.Net.Chart" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<script runat="server">
protected void Page_Load(object sender,EventArgs e)
{
// Load the data into the Store and DataBind.
this.stoCharts.DataSource = this.stoChartsValue;
this.stoCharts.DataBind();

this.Form.Controls.Add(BuildWindow1()); //construct window with chart build into
}

private object[] stoChartsValue
{
get
{
return new object[]
{
new object[] {"2011/01/01",10,200,550},
new object[] {"2011/02/01",15,300,450},
new object[] {"2011/03/01",21,452,800},
new object[] {"2011/04/01",1,125,952},
new object[] {"2011/05/01",18,214,458},
new object[] {"2011/06/01",30,57,480},
new object[] {"2011/07/01",25,38,452},
new object[] {"2011/08/01",14,189,650},
new object[] {"2011/09/01",11,170,520},
new object[] {"2011/10/01",9,98,152},
new object[] {"2011/11/01",3,78,259},
new object[] {"2011/12/01",45,120,454}
};
}
}


private Window BuildWindow1()
{
return this.X().Window()
.ID("Window1")
.Title("My Window With Chart in it")
.Height(400)
.Width(300)
.X(0)
.Y(0)
.Layout("Fit")
.Add(BuildChart());

}

private Window BuildWindow2()
{
return this.X().Window()
.ID("Window2")
.Title("My Window with chart into panel")
.Height(400)
.Width(300)
.X(500)
.Y(500)
.Layout("Fit")
.Add(BuildPanel());

}
private Chart BuildChart()
{
Chart MyChart = new Chart();
AxisCollection MyAxes=new AxisCollection();
CategoryAxis AxesX =new CategoryAxis();
NumericAxis AxesY = new NumericAxis();

ColumnSeries MySerie1 = new ColumnSeries();
ChartTheme Browser = new ChartTheme();

Gradient GradienBar = new Gradient();
GradientStop GradientStop = new GradientStop();

Browser.Colors = new string[3];
Browser.Colors[0]="#FF0000";
Browser.Colors[1]="#00FF00";
Browser.Colors[2]="#0000FF";
Browser.ThemeName = "myBrowser";
MyChart.Bin.Add(Browser);

//Gradient for red
GradientStop.Offset = 0;
GradientStop.Color = "#800000";
GradienBar.Stops.Add(GradientStop);
GradientStop = new GradientStop();
GradientStop.Offset = 100;
GradientStop.Color = "#FF8080";
GradienBar.Stops.Add(GradientStop);

//Gradient for green
GradientStop.Offset = 0;
GradientStop.Color = "#800000";
GradienBar.Stops.Add(GradientStop);
GradientStop = new GradientStop();
GradientStop.Offset = 100;
GradientStop.Color = "#80FF80";
GradienBar.Stops.Add(GradientStop);

//Gradient for blue
GradientStop.Offset = 0;
GradientStop.Color = "#000080";
GradienBar.Stops.Add(GradientStop);
GradientStop = new GradientStop();
GradientStop.Offset = 100;
GradientStop.Color = "#8080FF";
GradienBar.Stops.Add(GradientStop);

GradienBar.GradientID = "grdConfChart";
GradienBar.Angle = 0;
MyChart.Gradients.Add(GradienBar);

AxesX.Title = "Month";
AxesX.Fields = new string[1];
AxesX.Fields[0] = "Date";

AxesY.Minimum = 0;
AxesY.Fields = new string[3];
AxesY.Fields[0] = "Value1";
AxesY.Fields[1] = "Value2";
AxesY.Fields[2] = "Value3";

MyAxes.Add(AxesX);
MyAxes.Add(AxesY);

MySerie1.SeriesID = "IdSerie1";
MySerie1.Axis = Position.Left;
MySerie1.XField = new string[1];
MySerie1.XField[0] = "Date";
MySerie1.YField = new string[3];
MySerie1.YField[0] = "Value1";
MySerie1.YField[1] = "Value2";
MySerie1.YField[2] = "Value3";
MySerie1.Stacked = true;


MyChart.StoreID = "stoCharts";
MyChart.Animate = false;
MyChart.Theme = "myBrowser";
MyChart.Legend = true;
MyChart.Axes.Add(AxesX);
MyChart.Axes.Add(AxesY);

MyChart.Series.Add(MySerie1);

MyChart.LegendConfig = new Ext.Net.ChartLegend();
MyChart.LegendConfig.RefreshOnItemToggle = true;

return MyChart;
}

private Panel BuildPanel()
{
return this.X().Panel()
.ID("panChart")
.Title("Chart")
.Padding(5)
.Add(BuildChart());
}

</script>

<!DOCTYPE html protected "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Test Chart into panel</title>

<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />

</head>

<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" RethrowAjaxExceptions="True">

</ext:ResourceManager>
<%-- Data stores--%>
<ext:Store ID="stoCharts" runat="server" AutoLoad="True">
<Reader>
<ext:ArrayReader />
</Reader>
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="Date" />
<ext:ModelField Name="Value1" />
<ext:ModelField Name="Value2" />
<ext:ModelField Name="Value3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>





</form>
</body>

</html>

What I forget?

Daniil
Jun 05, 2012, 1:16 PM
Hi,

You have not used the defined Gradient.

In the example you mentioned
http://examples2.ext.net/#/Chart/Column/Browser_Stats/
the Gradients (see its ids) are used within the ChartTheme:

Colors="url(#v-1),url(#v-2),url(#v-3),url(#v-4),url(#v-5)"
and the ColumnSeries Renderer.

<Renderer Handler="var colors = ['url(#v-1)','url(#v-2)','url(#v-3)','url(#v-4)','url(#v-5)'];attributes.fill = colors[index % colors.length]; return attributes;" />

See also
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.chart.Chart-cfg-gradients

feanor91
Jun 05, 2012, 2:04 PM
OK, I will dig into that, but at first glance on Sencha doc, it seems very very complicated for me to implement.