[OPEN] [#1766] Problem transparent background chart

  1. #1

    [OPEN] [#1766] Problem transparent background chart

    Hi,
    I need the chart with the transparent background, reading on the forum I managed to do it.
    But if I add a second chart identical to the first one, transparency does not work.
    See my example.
    Please help me.
    Thank you.

    Jimmy

    <%@ Page Language="C#" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            List<object> data = new List<object>
            {
                new { Month = "Jan", Data1 = 20 },
                new { Month = "Feb", Data1 = 20 },
                new { Month = "Mar", Data1 = 19 },
                new { Month = "Apr", Data1 = 18 },
                new { Month = "May", Data1 = 18 },
                new { Month = "Jun", Data1 = 17 },
                new { Month = "Jul", Data1 = 16 },
                new { Month = "Aug", Data1 = 16 },
                new { Month = "Sep", Data1 = 16 },
                new { Month = "Oct", Data1 = 16 },
                new { Month = "Nov", Data1 = 15 },
                new { Month = "Dec", Data1 = 15 }
            };
    
    
            this.Chart1.GetStore().DataSource = data;
            this.CartesianChart1.GetStore().DataSource = data;
        }
    </script>
    
    
    <!DOCTYPE html>
    
    
    <html>
    <head runat="server">
        <title>Line Chart - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
    
        <style type="text/css">
            .legend-transparent .x-legend-container {
                background-color: transparent !important;
                -webkit-box-shadow: none !important;
                -moz-box-shadow: none !important;
                box-shadow: none !important;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
    
            <ext:Panel
                ID="pnlSpaced"
                runat="server"
                Layout="HBox"
                BodyPadding="5"
                BodyStyle="background-color: red;"
                >
                <Defaults>
                    <ext:Parameter Name="margin" Value="0 5 0 0" Mode="Value" />
                </Defaults>
                <LayoutConfig>
                    <ext:HBoxLayoutConfig Align="Top" />
                </LayoutConfig>
                <Items>
                    <ext:Panel
                        runat="server"
                        Width="650"
                        Height="550"
                        BodyStyle="background-color: transparent;">
                        <Items>
                            <ext:CartesianChart
                                ID="Chart1"
                                runat="server"
                                Width="650"
                                Height="550"
                                InsetPadding="40"
                                InnerPadding="0 40 0 40"
                                BodyStyle="background-color: transparent !important;">
                                <Background Fill="transparent" />
                                <Store>
                                    <ext:Store runat="server">
                                        <Model>
                                            <ext:Model runat="server">
                                                <Fields>
                                                    <ext:ModelField Name="Month" />
                                                    <ext:ModelField Name="Data1" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                    </ext:Store>
                                </Store>
                                <LegendDomConfig runat="server" Dock="Bottom" StyleSpec="background: transparent !important;" Cls="legend-transparent" Shadow="false">
                                </LegendDomConfig>
                                <Axes>
                                    <ext:NumericAxis
                                        Position="Left"
                                        Fields="Data1"
                                        Grid="false"
                                        Minimum="0"
                                        Maximum="24">
                                        <Style StrokeStyle="white" />
                                        <Label Color="white" />
                                        <Renderer Handler="return layoutContext.renderer(label) + '%';" />
                                    </ext:NumericAxis>
                                    <ext:CategoryAxis
                                        Position="Bottom"
                                        Fields="Month"
                                        Grid="true">
                                        <Style StrokeStyle="white" />
                                        <Label RotationDegrees="-45" Color="white" />
                                    </ext:CategoryAxis>
                                </Axes>
                                <Series>
                                    <ext:LineSeries XField="Month" YField="Data1" Title="pippo">
                                        <StyleSpec>
                                            <ext:Sprite LineWidth="4" />
                                        </StyleSpec>
                                        <HighlightConfig>
                                            <ext:Sprite FillStyle="#000" Radius="5" LineWidth="2" StrokeStyle="#fff" />
                                        </HighlightConfig>
                                        <Marker>
                                            <ext:Sprite Radius="4" />
                                        </Marker>
                                        <Label Field="Data1" Display="Over" />
                                    </ext:LineSeries>
                                </Series>
                            </ext:CartesianChart>
                        </Items>
                    </ext:Panel>
    
    
                    <ext:Panel
                        runat="server"
                        Width="650"
                        Height="550"
                        BodyStyle="background-color: transparent;">
                        <Items>
                            <ext:CartesianChart
                                ID="CartesianChart1"
                                runat="server"
                                Width="650"
                                Height="550"
                                InsetPadding="40"
                                InnerPadding="0 40 0 40"
                                BodyStyle="background-color: transparent !important;">
                                <Background Fill="transparent" />
                                <Store>
                                    <ext:Store runat="server">
                                        <Model>
                                            <ext:Model runat="server">
                                                <Fields>
                                                    <ext:ModelField Name="Month" />
                                                    <ext:ModelField Name="Data1" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                    </ext:Store>
                                </Store>
                                <LegendDomConfig runat="server" Dock="Bottom" StyleSpec="background: transparent !important;" Cls="legend-transparent" Shadow="false">
                                </LegendDomConfig>
                                <Axes>
                                    <ext:NumericAxis
                                        Position="Left"
                                        Fields="Data1"
                                        Grid="false"
                                        Minimum="0"
                                        Maximum="24">
                                        <Renderer Handler="return layoutContext.renderer(label) + '%';" />
                                    </ext:NumericAxis>
    
    
                                    <ext:CategoryAxis
                                        Position="Bottom"
                                        Fields="Month"
                                        Grid="true">
                                        <Label RotationDegrees="-45" Color="white" />
                                    </ext:CategoryAxis>
                                </Axes>
                                <Series>
                                    <ext:LineSeries XField="Month" YField="Data1" Title="pippo">
                                        <StyleSpec>
                                            <ext:Sprite LineWidth="4" />
                                        </StyleSpec>
                                        <HighlightConfig>
                                            <ext:Sprite FillStyle="#000" Radius="5" LineWidth="2" StrokeStyle="#fff" />
                                        </HighlightConfig>
                                        <Marker>
                                            <ext:Sprite Radius="4" />
                                        </Marker>
                                        <Label Field="Data1" Display="Over" />
                                    </ext:LineSeries>
                                </Series>
                            </ext:CartesianChart>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>
  2. #2
    Hello Jimmy!

    Sorry for the long delay in replying your inquire!

    Unfortunately I couldn't find a proper fix for it in the first iteration I gave in the sample (thanks by the way, it is awesomely straightforward to reproduce the issue!); I know the reason, yet must delve deeper in the code to figure out a solution for this.

    What I see is just, no matter what, the second rendered chart is drawn within an HTML Canvas block, whilst the first is in CSS. It's probably a DOM limitation that forced this behavior, but should try and see why this happens and, even if the second must come in a canvas drawing, I am sure it can take transparent sprites to attain the same result.

    We'll come back to you soon with a solution for this.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello again Jimmy!

    We still don't have a solution for the bug itself, but maybe a workaround could be the best solution for the time being.

    I'm afraid this is far from the best solution, but what you could do is load the charts from inner pages. I didn't try them as "ascx" controls and they are likely not to work, as the problem is client side -- with Ext JS -- and is triggered when more than one chart is defined in the same page.

    This would be an equivalent of the sample test case you provided. Notice I added a CSS property to the body tag in the inner page to ensure it is transparent to the parent page's panels:

    Parent "shell" page:
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Line Chart Shell - Ext.NET Examples</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Panel
                ID="pnlSpaced"
                runat="server"
                Layout="HBox"
                BodyPadding="5"
                BodyStyle="background-color: red;"
                >
                <Defaults>
                    <ext:Parameter Name="margin" Value="0 5 0 0" Mode="Value" />
                </Defaults>
                <LayoutConfig>
                    <ext:HBoxLayoutConfig Align="Top" />
                </LayoutConfig>
                <Items>
                    <ext:Panel
                        runat="server"
                        Width="650"
                        Height="550"
                        BodyStyle="background-color: transparent;">
                        <Loader runat="server"
                             AutoLoad="true"
                             Url="62893-chartTransparencyInner.aspx"
                             Mode="frame" />
                    </ext:Panel>
                    <ext:Panel
                        runat="server"
                        Width="650"
                        Height="550"
                        BodyStyle="background-color: transparent;">
                        <Loader runat="server"
                             AutoLoad="true"
                             Mode="frame"
                             Url="62893-chartTransparencyInner.aspx" />
                    </ext:Panel>
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>
    inner "charts" page (62893-chartTransparencyInner.aspx):
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            List<object> data = new List<object>
            {
                new { Month = "Jan", Data1 = 20 },
                new { Month = "Feb", Data1 = 20 },
                new { Month = "Mar", Data1 = 19 },
                new { Month = "Apr", Data1 = 18 },
                new { Month = "May", Data1 = 18 },
                new { Month = "Jun", Data1 = 17 },
                new { Month = "Jul", Data1 = 16 },
                new { Month = "Aug", Data1 = 16 },
                new { Month = "Sep", Data1 = 16 },
                new { Month = "Oct", Data1 = 16 },
                new { Month = "Nov", Data1 = 15 },
                new { Month = "Dec", Data1 = 15 }
            };
    
    
            this.Chart1.GetStore().DataSource = data;
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Line Chart - Ext.NET Examples</title>
        <style type="text/css">
            .legend-transparent .x-legend-container {
                background-color: transparent;
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
                box-shadow: none;
            }
        </style>
    </head>
    <body style="background-color: transparent">
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Viewport
                ID="pnlSpaced"
                runat="server"
                Layout="Fit" StyleSpec="background-color: transparent">
                <Items>
                    <ext:CartesianChart
                        ID="Chart1"
                        runat="server"
                        Width="650"
                        Height="550"
                        InsetPadding="40"
                        InnerPadding="0 40 0 40"
                        BodyStyle="background-color: transparent">
                        <Background Fill="transparent" />
                        <Store>
                            <ext:Store runat="server">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Month" />
                                            <ext:ModelField Name="Data1" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <LegendDomConfig runat="server" Dock="Bottom" StyleSpec="background: transparent" Cls="legend-transparent" Shadow="false">
                        </LegendDomConfig>
                        <Axes>
                            <ext:NumericAxis
                                Position="Left"
                                Fields="Data1"
                                Grid="false"
                                Minimum="0"
                                Maximum="24">
                                <Style StrokeStyle="white" />
                                <Label Color="white" />
                                <Renderer Handler="return layoutContext.renderer(label) + '%';" />
                            </ext:NumericAxis>
                            <ext:CategoryAxis
                                Position="Bottom"
                                Fields="Month"
                                Grid="true">
                                <Style StrokeStyle="white" />
                                <Label RotationDegrees="-45" Color="white" />
                            </ext:CategoryAxis>
                        </Axes>
                        <Series>
                            <ext:LineSeries XField="Month" YField="Data1" Title="pippo">
                                <StyleSpec>
                                    <ext:Sprite LineWidth="4" />
                                </StyleSpec>
                                <HighlightConfig>
                                    <ext:Sprite FillStyle="#000" Radius="5" LineWidth="2" StrokeStyle="#fff" />
                                </HighlightConfig>
                                <Marker>
                                    <ext:Sprite Radius="4" />
                                </Marker>
                                <Label Field="Data1" Display="Over" />
                            </ext:LineSeries>
                        </Series>
                    </ext:CartesianChart>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    I will see to log an issue upstream and in our issues tracker and hopefully be able to also provide an "in house" fix for this issue for our next release. We will update this with the issue number when we have it done.

    Hope t his helps for the time being.
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Hello once again, Jimmy!

    I found what exactly the issue is, while trying to reproduce the issue with Ext JS alone.

    Turns out Ext.NET outputs:

    <Background Fill="transparent" />
    As

    background: 'transparent',
    This "sugar" works for the first chart but not subsequent ones, for some reason. If defined as a sprite object instead of the color string, it works then. So, if you use this in markup code:

    <CustomConfig>
        <ext:ConfigItem Name="background" Value="{ fill: 'transparent' }" Mode="Raw" />
    </CustomConfig>
    Then the client script will be output as

    background: { fill: 'transparent' },
    Which will allow any charts you define (with background like this) work fine in the page.

    We have opened an issue under #1766 and will post an update here as soon as we get this fixed for good in Ext.NET code (either from upstream fixes or home-brewed fixes).

    Hope this helps, and thanks for reporting the issue!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    And once more, hello!

    Another quick workaround for that is to use just none as the chart's Background color. This should work for the "long term" (across versions) too.

    <Background Fill="none" />
    instead of

    <Background Fill="transparent" />
    The issue comes down from Sencha's Ext.util.Color.setFromString() implementation where it does not properly return transparent color (rgba(0,0,0,0), as its documentation claims) when a non-existing color name is provided (or "transparent", which results in the same rgba(0,0,0,0) if you try in browsers' CSS).
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. How to chart legend background is transparent?
    By meka123 in forum 4.x Help
    Replies: 4
    Last Post: Oct 30, 2018, 12:32 AM
  2. [CLOSED] Set background of Panel to transparent
    By supera in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 01, 2013, 11:57 AM
  3. [CLOSED] Window transparent background.
    By alainfo in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 17, 2010, 9:24 AM
  4. iframe transparent background
    By pintun in forum 1.x Help
    Replies: 1
    Last Post: Nov 05, 2009, 1:50 PM
  5. Replies: 2
    Last Post: Jan 07, 2009, 10:33 AM

Posting Permissions