[OPEN] [#192] Chart axis setTitle

**bayoglu** · Mar 28, 2013, 4:09 PM

Hello,

I am trying to use setTile function to change title of a chart axis. Initially chart store is empty. In a function I load data into chart store. For the first time I try to use setTitle as below, setTitle function is not available and it does not work. Next time, axis properties are extended to include .setTitle and it works. What condition should I set for setting title in the first try also?

App.Chart1.axes.items[0].setTitle("Value");

Initially available properties of App.Chart1.axes.items[0]:

+ label {...} Object
grid true Boolean
+ position "bottom" String
+ fields [Data] Object, (Array)
+ type "Numeric" String
minimum 0 Number

Available properties after first data load:

+ chart {...} Object
+ axisStyle {...} Object
+ axisLabelLeftStyle {...} Object
+ axisLabelRightStyle {...} Object
+ axisLabelTopStyle {...} Object

... and more

If I call App.Chart1.redraw before calling .setTitle it works fine but in this case axes labels move right / or chart moves left. Please see attached figure below:

Click image for larger version.

Name: titleproblem.png
Views: 47
Size: 40.6 KB
ID: 5926

**Baidaly** · Mar 29, 2013, 12:25 AM

Hello!

I couldn't reproduce your problem with values on left axe (I've tried example below against Ext.NET trunk) but I could reproduce the problem with titles and it seems strange. We'll investigate it more.

For now, I can suggest to set titles before loading data:

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Globalization" %>

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

<script runat="server">
    public class ChartData {
        public string Name { get; set; }
 
        public double Data1 { get; set; }
 
        public static List<ChartData> GenerateData(int n, int floor) {
            List<ChartData> data = new List<ChartData>(n);
            Random random = new Random();
            double p = (random.NextDouble() * 11) + 1;
 
            for (int i = 0; i < n; i++) {
                data.Add(new ChartData {
                    Name = CultureInfo.InvariantCulture.DateTimeFormat.MonthNames[i % 12],
                    Data1 = Math.Floor(Math.Max(random.NextDouble() * 100, floor))
                });
            }
 
            return data;
        }
    }
     
    protected void ReloadData(object sender, DirectEventArgs e)
    {
        Store store = this.Chart1.GetStore();
         
        store.DataSource = Ext.Net.Examples.ChartData.GenerateData();
        store.DataBind();
    }
     
</script>   

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Bar Chart - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />    

    <script>
        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 runat="server">
        <ext:ResourceManager runat="server" />

        <h1>Bar Chart Sample</h1>
        
        <p>Display a sets of random data in a bar series. Reload data will randomly generate a new set of data in the store.</p>

        <ext:ChartTheme runat="server" ThemeName="CustomBlue">
            <Axis Stroke="#084594" />
            <AxisLabelLeft Fill="rgb(8,69,148)" Font="12px Arial" FontFamily="Arial" />
            <AxisLabelBottom Fill="rgb(8,69,148)" Font="12px Arial" FontFamily="Arial" />
            <AxisTitleLeft Font="bold 18px Arial" />
            <AxisTitleBottom Font="bold 18px Arial" />
        </ext:ChartTheme>

        <ext:Panel 
            runat="server"
            Title="Bar Chart"
            Width="800"
            Height="600"
            Layout="FitLayout">
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button 
                            runat="server" 
                            Text="Reload Data" 
                            Icon="ArrowRefresh">
                            <DirectEvents>
                                <Click OnEvent="ReloadData" Before="
                                    App.Chart1.axes.items[0].title = 'Hits';
                                    App.Chart1.axes.items[1].title = 'Months';
                                    "></Click>
                            </DirectEvents>
                        </ext:Button>
                        <ext:Button 
                            runat="server" 
                            Text="Save Chart" 
                            Icon="Disk"
                            Handler="saveChart"
                            />
                    </Items>
                </ext:Toolbar>
            </TopBar>

            <Items>
                <ext:Chart 
                    ID="Chart1" 
                    runat="server"
                    Shadow="true"
                    Theme="CustomBlue"
                    Animate="true">
                    <Store>
                        <ext:Store 
                            runat="server" >                           
                            <Model>
                                <ext:Model runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Name" />
                                        <ext:ModelField Name="Data1" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>

                    <Background>
                        <Gradient GradientID="backgroundGradient" Angle="45">
                            <Stops>
                                <ext:GradientStop Offset="0" Color="#ffffff" />
                                <ext:GradientStop Offset="100" Color="#eaf1f8" />
                            </Stops>
                        </Gradient>
                    </Background>

                    <Axes>
                        <ext:NumericAxis                             
                            Fields="Data1"
                            Position="Bottom"
                            Grid="true"
                            Minimum="0">
                            <Label>
                                <Renderer Handler="return Ext.util.Format.number(value, '0,0');" />
                            </Label>
                        </ext:NumericAxis>                            

                        <ext:CategoryAxis 
                            Fields="Name"
                            Position="Left"
                            />                            
                    </Axes>

                    <Series>
                        <ext:BarSeries 
                            Axis="Bottom"
                            Highlight="true" 
                            XField="Name" 
                            YField="Data1">
                            <Tips TrackMouse="true" Width="140" Height="28">
                                <Renderer Handler="this.setTitle(storeItem.get('Name') + ': ' + storeItem.get('Data1') + ' views');" />
                            </Tips>
                            <Label 
                                Display="InsideEnd" 
                                Field="Data1" 
                                Orientation="Horizontal" 
                                Color="#333" 
                                TextAnchor="middle"
                                />
                        </ext:BarSeries>
                    </Series>
                </ext:Chart>
            </Items>
        </ext:Panel>
    </form>    
</body>
</html>

**bayoglu** · Mar 29, 2013, 12:38 AM

Thank you Daulet. As you told, I set the initial title from markup as a workaround. In java script I am currently using setTitle as:

    if (myAxis.setTitle !== undefined) {
            myAxis.setTitle("Title");
    }

Thanks for attention. I will keep watching the thread.

**Baidaly** · Mar 29, 2013, 12:51 AM

We reported to Sencha: http://www.sencha.com/forum/showthread.php?260037

**Daniil** · Apr 09, 2013, 4:05 AM

For some reason Sencha doesn't answer, but, it definitely looks a bug. So, we created an Issue to track this defect.
https://github.com/extnet/Ext.NET/issues/192

**Baidaly** · Apr 10, 2013, 6:02 PM

Sencha opened a bug ticket.

Thread: [OPEN] [#192] Chart axis setTitle

Thread Tools

Search Thread

Display

[OPEN] [#192] Chart axis setTitle

Similar Threads

Chart: changing Fields of Axis runtime dynamically

[CLOSED] Changing the font size of the column chart x and y axis title.

[CLOSED] Is it possible to put a tooltip on chart legend or chart axis?

[CLOSED] Area chart starting axis

[CLOSED] tab.setTitle() updates title but old text on tab remains

Posting Permissions

Sitemap

Downloads

Resources

Thread: [OPEN] [#192] Chart axis setTitle

[OPEN] [#192] Chart axis setTitle

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us