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

  1. #1

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

    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.
    Last edited by Daniil; Jun 04, 2012 at 1:31 PM. Reason: [CLOSED]
  2. #2
    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
    http://examples2.ext.net/#/Chart/Column/Browser_Stats/
    Vladimir Shcheglov
    Sr. Developer
  3. #3
    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
  4. #4
    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);
    Vladimir Shcheglov
    Sr. Developer
  5. #5
    Ah, OK, more clear now, i go to play. thanks

Similar Threads

  1. [CLOSED] How to Export SVG chart from code behind
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 27, 2013, 6:20 AM
  2. Problem with Ext.Net Chart - Column
    By OCaglayan in forum 2.x Help
    Replies: 1
    Last Post: Jul 31, 2012, 12:43 PM
  3. [CLOSED] Perhaps a bug in stacked column chart
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 11
    Last Post: Jul 23, 2012, 8:19 AM
  4. Replies: 1
    Last Post: Jun 02, 2012, 7:12 AM
  5. Replies: 0
    Last Post: May 30, 2012, 8:44 PM

Posting Permissions