[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

Code:

<%@ 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>

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.

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:

Code:

<%@ 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):

Code:

<%@ 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.

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:

Code:

<Background Fill="transparent" />

As

Code:

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:

Code:

<CustomConfig> <ext:ConfigItem Name="background" Value="{ fill: 'transparent' }" Mode="Raw" /> </CustomConfig>

Then the client script will be output as

Code:

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!

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.

Code:

<Background Fill="none" />

instead of

Code:

<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).