PDA

View Full Version : [CLOSED] shared gradients and chartTheme



CarpFisher
Aug 22, 2012, 4:54 PM
Hi

following the example find here: http://examples2.ext.net/#/Chart/Column/Browser_Stats/ , I wanted to have a ChartTheme which uses the same Gradients through the whole application. It works in Chrome that once a Gradient is defined somewhere, the ChartTheme can get the colors from the function url(#v-1), however in i.e. it didn't work. Each Chart object must have the Gradients defined again individually. Is there a way for me to put the gradients in the resourceManager or something so that I can just define the gradients once, without repeating that every single chart? Thank you very much in advance

Daniil
Aug 22, 2012, 6:36 PM
Hi,

Could you provide a sample which works different in Chrome and IE?

CarpFisher
Aug 22, 2012, 7:09 PM
Here is an example which rendered differently in IE and in Chrome


<%@ Page Language="C#" %>

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<script runat="server">
protected void ReloadData(object sender, DirectEventArgs e)
{
var store = this.Chart1.GetStore();

store.DataSource = new object[] {
new {Name="t1", Data1=50}, new {Name="t2", Data1=60}, new {Name="t3", Data1=70}

};
store.DataBind();



var store2 = this.Chart2.GetStore();

store2.DataSource = new object[] {
new {Name="t1", Data1=50}, new {Name="t2", Data1=60}, new {Name="t3", Data1=70}

};
store2.DataBind();
}
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Column Chart - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
function saveChart(btn) {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function (choice) {
if (choice == 'yes') {
btn.up('panel').down('chart').save({
type: 'image/png'
});
}
});
}
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager runat="server" />

<h1>Column Chart Sample</h1>

<p>Display a sets of random data in a column series. Reload data will randomly generate a new set of data in the store.</p>

<ext:ChartTheme
ID="FancyTheme"
runat="server"
ThemeName="Fancy"
Colors="url(#v-1),url(#v-2),url(#v-3),url(#v-4),url(#v-5)">
<Axis Fill="#eee" Stroke="#eee" />
<AxisLabelLeft Fill="#eee" />
<AxisLabelBottom Fill="#eee" />
<AxisTitleLeft Fill="#eee" />
<AxisTitleBottom Fill="#eee" />
</ext:ChartTheme>

<ext:Panel
runat="server"
Title="Column Chart"
Width="800"
Height="600"
Layout="FitLayout"
>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button
runat="server"
Text="Reload Data"
Icon="ArrowRefresh"
OnDirectClick="ReloadData"
/>

<ext:Button
runat="server"
Text="Save Chart"
Icon="Disk"
Handler="saveChart"
/>
</Items>
</ext:Toolbar>
</TopBar>

<Items>
<ext:Chart
ID="Chart1"
runat="server"
Theme="Fancy"
Shadow="true">
<AnimateConfig Easing="BounceOut" Duration="750" />
<Store>
<ext:Store
runat="server"

AutoDataBind="true">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Data1" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>

<Background Fill="rgb(17, 17, 17)" />

<Gradients>
<ext:Gradient GradientID="v-1" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(212, 40, 40)" />
<ext:GradientStop Offset="100" Color="rgb(117, 14, 14)" />
</Stops>
</ext:Gradient>

<ext:Gradient GradientID="v-2" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(180, 216, 42)" />
<ext:GradientStop Offset="100" Color="rgb(94, 114, 13)" />
</Stops>
</ext:Gradient>

<ext:Gradient GradientID="v-3" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(43, 221, 115)" />
<ext:GradientStop Offset="100" Color="rgb(14, 117, 56)" />
</Stops>
</ext:Gradient>

<ext:Gradient GradientID="v-4" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(45, 117, 226)" />
<ext:GradientStop Offset="100" Color="rgb(14, 56, 117)" />
</Stops>
</ext:Gradient>

<ext:Gradient GradientID="v-5" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(187, 45, 222)" />
<ext:GradientStop Offset="100" Color="rgb(85, 10, 103)" />
</Stops>
</ext:Gradient>
</Gradients>

<Axes>
<ext:NumericAxis
Fields="Data1"
Title="Number of Hits"
Minimum="0"
Maximum="100">
<Label>
<Renderer Handler="return Ext.util.Format.number(value, '0,0');" />
</Label>
<GridConfig>
<Odd Stroke="#555" />
<Even Stroke="#555" />
</GridConfig>
</ext:NumericAxis>

<ext:CategoryAxis
Position="Bottom"
Fields="Name"
Title="Month of the Year"
/>
</Axes>

<Series>
<ext:ColumnSeries
Axis="Left"
Highlight="true"
XField="Name"
YField="Data1">
<Label
Display="InsideEnd"
Field="Data1"
Orientation="Horizontal"
Fill="#fff"
Font="17px Arial"
TextAnchor="middle">
<Renderer Handler="return Ext.util.Format.number(value, '0');" />
</Label>
<Style Opacity="0.95" />
<Renderer Handler="var colors = ['url(#v-1)','url(#v-2)','url(#v-3)','url(#v-4)','url(#v-5)'];attributes.fill = colors[index % colors.length]; return attributes;" />
</ext:ColumnSeries>
</Series>
</ext:Chart>


</Items>
</ext:Panel>
<ext:Panel
runat="server"
Title="Column Chart"
Width="800"
Height="600"
Layout="FitLayout"
>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button
runat="server"
Text="Reload Data"
Icon="ArrowRefresh"
OnDirectClick="ReloadData"
/>

<ext:Button
runat="server"
Text="Save Chart"
Icon="Disk"
Handler="saveChart"
/>
</Items>
</ext:Toolbar>
</TopBar>

<Items>
<ext:Chart
ID="Chart2"
runat="server"
Theme="Fancy"
Shadow="true">
<AnimateConfig Easing="BounceOut" Duration="750" />
<Store>
<ext:Store
runat="server"

AutoDataBind="true">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Data1" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>

<Background Fill="rgb(17, 17, 17)" />



<Axes>
<ext:NumericAxis
Fields="Data1"
Title="Number of Hits"
Minimum="0"
Maximum="100">
<Label>
<Renderer Handler="return Ext.util.Format.number(value, '0,0');" />
</Label>
<GridConfig>
<Odd Stroke="#555" />
<Even Stroke="#555" />
</GridConfig>
</ext:NumericAxis>

<ext:CategoryAxis
Position="Bottom"
Fields="Name"
Title="Month of the Year"
/>
</Axes>

<Series>
<ext:ColumnSeries
Axis="Left"
Highlight="true"
XField="Name"
YField="Data1">
<Label
Display="InsideEnd"
Field="Data1"
Orientation="Horizontal"
Fill="#fff"
Font="17px Arial"
TextAnchor="middle">
<Renderer Handler="return Ext.util.Format.number(value, '0');" />
</Label>
<Style Opacity="0.95" />
<Renderer Handler="var colors = ['url(#v-1)','url(#v-2)','url(#v-3)','url(#v-4)','url(#v-5)'];attributes.fill = colors[index % colors.length]; return attributes;" />
</ext:ColumnSeries>
</Series>
</ext:Chart>


</Items>
</ext:Panel>
</form>
</body>
</html>

Vladimir
Aug 22, 2012, 8:13 PM
I don't see any difference between IE and Chrome. Both browsers show the sample equally
Can you post screenshots that demonstrate the difference?

Vladimir
Aug 22, 2012, 8:15 PM
Also please clarify IE version

CarpFisher
Aug 23, 2012, 8:46 AM
Did you click on "Reload Data" first?

It's IE 8.0.6001

My main question is not so much about the difference between IE and Chrome, but how to properly share the gradients as they have to belong or under a chart, I want to know if that's possible to move them to a common place.

Here are the pictures in IE and Chrome:

4667

4668

Thanks

Daniil
Aug 23, 2012, 10:00 AM
Reproduced with IE9 in IE8 mode.

Well, I think Gradients are required for the Chart where you need to use these Gradients. If set up Gradients for the second Chart, then it works well in IE8 as well.

So, if you need to use the same Gradients for several Charts, these Gradients must be repeated for each Chart.

You can easily do that in code behind.

Example

Gradients gradients = new Gradients();
gradients.Add(new Gradient() { GradientID = "v-1" });
gradients.Add(new Gradient() { GradientID = "v-2" });

this.Chart1.Gradients.AddRange(gradients);
this.Chart2.Gradients.AddRange(gradients);

I can't see any other way to share Gradients.

CarpFisher
Aug 24, 2012, 10:07 AM
Thanks....

I've tried to put Gradients object in Settings in configuration, however it didn't work as some properties of GradientStop which it contains can't be serialised. I eventually put all the color definition in a seperate static class and whenever I draw a chart I point its gradient to that static class ... not 100% ideal as I have to recompile the binary to change color definition in that static class but that is the work around.

Daniil
Aug 24, 2012, 11:25 AM
I think you could implement a JSON serializer for Gradients.