[CLOSED] Best way to serialise a Chart LegendConfig

  1. #1

    [CLOSED] Best way to serialise a Chart LegendConfig

    I'm attempting to build in SmartLegend into a Chart control. All is working as expected, however I'm wondering the best way to serialise the LegendConfig.

    I tried the following:
    new ChartLegend.Config().Apply<ChartLegend.Config>(this.LegendConfig).Serialize();
    however the config ended up with Capital property names:
    {"BoxFill":"","BoxStroke":"","BoxStrokeWidth":0,"BoxZIndex":100,"ItemSpacing":10,"LabelColor":"#000","LabelFont":"Segoe UI Light_ 8px","Padding":5,"Position":"Bottom","Update":true,"Visible":true,"X":0,"Y":0})
    It seems like something that should be really simple but I'm just missing it!
  2. #2
    Ended up with the following which seemed to work well:
    var legendConfig = new ClientConfig().Serialize(this.LegendConfig);

    For anyone that's interested in using SmartLegend here's a simplified version of our Base Chart Control. We implement common charts such as PieCharts or LineCharts on top of this control so we get some basic functionality across all our charts for "free".

    I'm sure someone smarter than me could turn it into a Plugin...

        [assembly: WebResource("DemoControl.ExternalJavascript.SmartLegend.LegendItem.js", "text/javascript")]
        [assembly: WebResource("DemoControl.ExternalJavascript.SmartLegend.Legend.js", "text/javascript")]
        [assembly: WebResource("DemoControl.ExternalJavascript.SmartLegend.SmartLegendItem.js", "text/javascript")]
        [assembly: WebResource("DemoControl.ExternalJavascript.SmartLegend.SmartLegend.js", "text/javascript")]
        public abstract class BaseChartControl : Ext.Net.Chart
        {
    
    
            protected override void OnInit(EventArgs e)
            {
                base.OnInit(e);
                if (this.LegendConfig != null && this.UseSmartLegend)
                {
    
                    var legendConfig = new ClientConfig().Serialize(this.LegendConfig);
                    
                    // Override legend config with the SmartLegend class. Pulls through the existing legendConfig.
    
                    this.CustomConfig.Add(new ConfigItem("legend", "Ext.create('Ext.ux.chart.SmartLegend', " + legendConfig + ")",
                        ParameterMode.Raw));
                }
            }
    
            protected override List<ResourceItem> Resources
            {
                get
                {
                    List<ResourceItem> baseList = base.Resources;
    
                    if (this.UseSmartLegend)
                    {
                        var scripts = new string[]
                        {
                            "DemoControl.ExternalJavascript.SmartLegend.LegendItem.js",
                            "DemoControl.ExternalJavascript.SmartLegend.Legend.js",
                            "DemoControl.ExternalJavascript.SmartLegend.SmartLegendItem.js",
                            "DemoControl.ExternalJavascript.SmartLegend.SmartLegend.js",
                        };
                    
                        baseList.Capacity += scripts.Length;
                        foreach (var script in scripts)
                            baseList.Add(new ClientScriptItem(typeof(BaseChartControl), script, script));
                    }
                    
                    
                    return baseList;
                }
            }
    
            /// <summary>
            /// Use the 3rd Party Smart Legend Control so that the labels wrap! https://github.com/nohuhu/Ext.ux.chart.SmartLegend
            /// </summary>
            public bool UseSmartLegend { get; set; }
        }
    Last edited by pgodwin; Jul 28, 2016 at 12:12 AM. Reason: Add the UseSmartLegend property
  3. #3
    Hello!

    Thanks for sharing your experience on running the smart legend addon. It is a very interesting application of third-party code with Ext.NET!
    Fabrício Murta
    Developer & Support Expert
  4. #4
    No worries. Is there a better way to do this? What is the best way of bringing 3rd party extjs code into Ext.net? Is there example code?
  5. #5
    Hello!

    As far as my knowledge allows me to say, your approach is the correct one and there's not really much where to improve. If anything, maybe, some builder classes and attributes to handle default values (not to emit the setting if you use its default value -- or don't specify it at all in your webforms/razor or class code).

    Actually, for `bool`, there's an edge case where, if you override the default value, you may be unable to explicitly choose the original default. To understand this, refer to issue #1173.

    At one hand, using `bool`, intellisense gives you a neat 'true' and 'false' while typing in the property in markup. But if you override client-side default (for example), from `false` to `true`, you may be unable to force the old default value. This only triggers if you override ExtJS' default values somehow (yes, that's possible and in some situations useful e.g. inside a container with similar text boxes, default overridden so they all require less settings individually).

    At the other hand, using `bool?` will allow you to just assume 'null' as default, whenever that property is 'null', it is not emitted at all, and the default (whatever it is) is used. When either true or false is specified, it is used then, regardless of default values override. The other side of the coin will show you in intellisense no helpful filling hint for the property, whereas trying with anything different than empty, false or true will most likely throw a runtime error.

    Maybe the best solution would be to use then an Enum, like many settings (to name a couple, UI and some Align properties), then use enum.Default as default, then enum.False to `false` and enum.True to `true`. The mapping here probably would be the most challenging (but not new) step. All properties (or Config Option ExtJS-wise) that uses enum in Ext.NET at least convert their case from upper to lower. Some may have to change, say, an underline or uppercase into hyphens (don't remember the exact example right now), as enums don't accept the hyphen (-) character.

    As for examples well, best I can think of is actually on the source codes you have access to as being a premium member. You can for example, find a component with a setting in the shape you want, and then investigate its source code (under the Ext/ directory on Ext.NET project), then using something similar in your code.

    Well, I hope this helps! Your usage really looks okay to me and all left would be cosmetics IMO.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 4
    Last Post: Mar 04, 2016, 11:12 AM
  2. Replies: 2
    Last Post: Jun 20, 2013, 10:32 AM
  3. Scrollbar for LegendConfig on Chart
    By tk.Mageztik in forum 2.x Help
    Replies: 0
    Last Post: Aug 23, 2012, 11:35 PM
  4. [CLOSED] Change LegendConfig in Chart
    By osef in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 11, 2012, 12:17 AM
  5. 2.0 Chart - Update LegendConfig
    By Vladimir in forum 2.x Help
    Replies: 2
    Last Post: May 21, 2012, 6:21 AM

Tags for this Thread

Posting Permissions