[CLOSED] How to manage column colors in a chart from code behind.

[feanor91]

Hello

In Ext.JS and javascrip, I use this method to put custom colors on my chart :

var colors = ['rgb(47, 162, 223)',
                  'rgb(60, 133, 46)',
                  'rgb(234, 102, 17)',
                  'rgb(154, 176, 213)',
                  'rgb(10, 25, 186)',
                  'rgb(120, 30, 36)',
                  'rgb(100, 120, 80)',
                  'rgb(200, 138, 98)',
                  'rgb(186, 10, 25)',
                  'rgb(102, 85, 213)'];

Ext.chart.theme.Browser = Ext.extend(Ext.chart.theme.Base, {
    constructor: function (config) {
        Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
            colors: colors
        }, config));
    }
});

and in the chart :

var PSChart = Ext.create('Ext.chart.Chart', {
    animate: true,
    store: stoPS,
    theme: 'Browser',
    shadow: false,
...

I tried to achieve same behavior from code behind, but I have problem, I tried that, but not works:

<%@ 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();

            Browser.Colors = new string[3];
            Browser.Colors[0]="#FF0000";
            Browser.Colors[1]="#00FF00";
            Browser.Colors[2]="#0000FF";

                       
            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="Browser";
            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>

I will look deeper into example, in case of, but until now, I found nothing.

[Vladimir]

1. Set ThemeName for ChartTheme
2. Add ChartTheme to Control collection or to Bin collection of Ext.Net widget
3. Use ThemeName of ChartTheme in Theme property of Chart

Please see
https://examples2.ext.net/#/Chart/Column/Browser_Stats/

[feanor91]

Hello

this is the example I follow, I try to use ThemeName, but the result was the same as I did not add the theme to an Ext.Net.Widget, apprently.

But where in the example did you see this widget stuff? And how to deal with in code behind?

Could you please fulffill the example with the solution? Or at least explain how to use Ext.Net.Widget? I did not found any "widget" in examples

[Vladimir]

Widget is any UI control
In your sample, you did not add ChartTheme to controls collection

Add the following code to your sample

Browser.ThemeName = "Browser";
MyChart.Bin.Add(Browser);
// or
// this.Form.Controls.Add(Browser);

[feanor91]

Ah, OK, more clear now, i go to play. thanks