Results 1 to 8 of 8

Thread: [CLOSED] Chart title

  1. #1
    Member
    Join Date
    Mar 2012
    Posts
    296

    [CLOSED] Chart title

    Sorry for repeating part of this but it has no answer yet.

    [using figure attached below]
    1) How can I set title for a chart with ext:GaugeSeries and format its text (not series title)?
    2) How can I format series title (font size etc.)?
    3) Is it possible to show series values on donut?
    4) Is it possible to render series values like we do in grid columns?


    One picture worths thousands of words (; Please see Qs in figure:

    Click image for larger version. 

Name:	donut.png 
Views:	83 
Size:	22.9 KB 
ID:	5784

    Code:
    <ext:Chart ID="Chart1" runat="server" StyleSpec="background:#fff;" InsetPadding="25" Flex="1" StoreID="MyStore" >
        <AnimateConfig Easing="ElasticIn" Duration="1000" />
        <Axes>
            <ext:GaugeAxis AxisID="MyAxis" Steps="10" Margin="-10" Title="My Title" Minimum="1" Maximum="341">
                <%--<Label Font="Arial" FontSize="16" Text="..." Hidden="false"></Label>--%>
            </ext:GaugeAxis>
        </Axes>
        <Series>
            <ext:GaugeSeries AngleField="Data1" Donut="0" ColorSet="#F49D10,#ddd">
                <%--<Label Font="Arial" FontSize="16" Text="..." Hidden="false"></Label>--%>
            </ext:GaugeSeries>
        </Series>                                                
    </ext:Chart>
    Thanks.
    Last edited by Daniil; Mar 14, 2013 at 9:46 AM. Reason: [CLOSED]

  2. #2
    Member
    Join Date
    Mar 2011
    Location
    Toronto
    Posts
    2,490
    Hello!

    Please, take a look at the following example:

    Code:
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        public List<object> Values = new List<object>
                {
                    new
                        {
                            Name = "1",
                            Data1 = 10
                        }
                };
    </script>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET Examples</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" SourceFormatting="True" />
        <script>
            Ext.override(Ext.chart.axis.Gauge, {
                drawTitle: function () {
                    var me = this,
                            chart = me.chart,
                            surface = chart.surface,
                            bbox = chart.chartBBox,
                            labelSprite = me.titleSprite,
                            labelBBox;
    
                    if (!labelSprite) {
                        me.titleSprite = labelSprite = surface.add(Ext.apply({
                            type: 'text',
                            zIndex: 2
                        }, me.axisTitleStyle, me.labelTitle));
                    }
                    labelSprite.setAttributes(Ext.apply({
                        text: me.title
                    }, me.label || {}), true);
                    labelBBox = labelSprite.getBBox();
                    labelSprite.setAttributes({
                        x: bbox.x + (bbox.width / 2) - (labelBBox.width / 2),
                        y: (this.label.yP != undefined && !Number.isNaN(this.label.yP)) ? this.label.yP : bbox.y + bbox.height - (labelBBox.height / 2) - 4
                    }, true);
                }
            });
        </script>
        <ext:Panel runat="server" Title="Gauge Charts" Width="300" Height="250" Layout="Fit">
            <Items>
                <ext:Chart ID="Chart2" runat="server" Animate="true" StyleSpec="background:#fff;"
                    InsetPadding="50">
                    <Store>
                        <ext:Store runat="server" Data="<%# Values %>" AutoDataBind="true">
                            <Model>
                                <ext:Model runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Name" />
                                        <ext:ModelField Name="Data1" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Axes>
                        <ext:GaugeAxis Minimum="0" Maximum="100" Steps="10" Title="Title">
                            <Label FontSize="20">
                                <CustomConfig>
                                    <ext:ConfigItem Name="yP" Value="20" Mode="Raw" />
                                </CustomConfig>
                                <Renderer Handler="return 0;">
                                </Renderer>
                            </Label>
                        </ext:GaugeAxis>
                    </Axes>
                    <Series>
                        <ext:GaugeSeries AngleField="Data1" Donut="30" ColorSet="#82B525,#ddd">
                        </ext:GaugeSeries>
                    </Series>
                </ext:Chart>
            </Items>
        </ext:Panel>
        </form>
    </body>
    </html>

  3. #3
    Member
    Join Date
    Mar 2012
    Posts
    296
    Hello!

    Thank you for the great example. Title issue is solved however Q3 and Q4 are still open. The renderer you provided is for axis values. I want to show the series value if possible. In other words, the renderer in your example formats the axis values by step 10 in the example. Let's say the series value is 36, I want to show 36 and its associated Level (eg. Low) as value on the chart.

    Please see the image below:

    Click image for larger version. 

Name:	gauge.png 
Views:	57 
Size:	9.6 KB 
ID:	5785

    If it is possible to define/show <Label> for ext:GaugeSeries or creating legend with values is supported in gauge charts, it may help. Is that possible?

    Thanks.

    Quote Originally Posted by Baidaly View Post
    Hello!

    Please, take a look at the following example:

    Code:
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        public List<object> Values = new List<object>
                {
                    new
                        {
                            Name = "1",
                            Data1 = 10
                        }
                };
    </script>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET Examples</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" SourceFormatting="True" />
        <script>
            Ext.override(Ext.chart.axis.Gauge, {
                drawTitle: function () {
                    var me = this,
                            chart = me.chart,
                            surface = chart.surface,
                            bbox = chart.chartBBox,
                            labelSprite = me.titleSprite,
                            labelBBox;
    
                    if (!labelSprite) {
                        me.titleSprite = labelSprite = surface.add(Ext.apply({
                            type: 'text',
                            zIndex: 2
                        }, me.axisTitleStyle, me.labelTitle));
                    }
                    labelSprite.setAttributes(Ext.apply({
                        text: me.title
                    }, me.label || {}), true);
                    labelBBox = labelSprite.getBBox();
                    labelSprite.setAttributes({
                        x: bbox.x + (bbox.width / 2) - (labelBBox.width / 2),
                        y: (this.label.yP != undefined && !Number.isNaN(this.label.yP)) ? this.label.yP : bbox.y + bbox.height - (labelBBox.height / 2) - 4
                    }, true);
                }
            });
        </script>
        <ext:Panel runat="server" Title="Gauge Charts" Width="300" Height="250" Layout="Fit">
            <Items>
                <ext:Chart ID="Chart2" runat="server" Animate="true" StyleSpec="background:#fff;"
                    InsetPadding="50">
                    <Store>
                        <ext:Store runat="server" Data="<%# Values %>" AutoDataBind="true">
                            <Model>
                                <ext:Model runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Name" />
                                        <ext:ModelField Name="Data1" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Axes>
                        <ext:GaugeAxis Minimum="0" Maximum="100" Steps="10" Title="Title">
                            <Label FontSize="20">
                                <CustomConfig>
                                    <ext:ConfigItem Name="yP" Value="20" Mode="Raw" />
                                </CustomConfig>
                                <Renderer Handler="return 0;">
                                </Renderer>
                            </Label>
                        </ext:GaugeAxis>
                    </Axes>
                    <Series>
                        <ext:GaugeSeries AngleField="Data1" Donut="30" ColorSet="#82B525,#ddd">
                        </ext:GaugeSeries>
                    </Series>
                </ext:Chart>
            </Items>
        </ext:Panel>
        </form>
    </body>
    </html>

  4. #4
    Member
    Join Date
    Mar 2012
    Posts
    296
    For whom ever wants to use Baidaly's great example, you may need to replace !Number.isNaN(this.label.yP) with !isNaN(this.label.yP) to get it working.
    Is that a browser issue?

    Thanks again.

  5. #5
    Member
    Join Date
    Mar 2011
    Location
    Toronto
    Posts
    2,490
    Quote Originally Posted by bayoglu View Post
    Hello!

    Thank you for the great example. Title issue is solved however Q3 and Q4 are still open. The renderer you provided is for axis values. I want to show the series value if possible. In other words, the renderer in your example formats the axis values by step 10 in the example. Let's say the series value is 36, I want to show 36 and its associated Level (eg. Low) as value on the chart.

    Please see the image below:

    Click image for larger version. 

Name:	gauge.png 
Views:	57 
Size:	9.6 KB 
ID:	5785

    If it is possible to define/show <Label> for ext:GaugeSeries or creating legend with values is supported in gauge charts, it may help. Is that possible?

    Thanks.
    Unfortunately, you cannot do this because renderer doesn't have access to anything except current value. Here is related request: http://www.sencha.com/forum/showthread.php?230990

  6. #6
    Member
    Join Date
    Mar 2011
    Location
    Toronto
    Posts
    2,490
    Quote Originally Posted by bayoglu View Post
    For whom ever wants to use Baidaly's great example, you may need to replace !Number.isNaN(this.label.yP) with !isNaN(this.label.yP) to get it working.
    Is that a browser issue?

    Thanks again.
    Thank you! This is difference between IE and FF/Chrome

  7. #7
    Member
    Join Date
    Mar 2012
    Posts
    296
    Quote Originally Posted by Baidaly View Post
    Unfortunately, you cannot do this because renderer doesn't have access to anything except current value. Here is related request: http://www.sencha.com/forum/showthread.php?230990
    Then in this case is it possible to supply axis values in a list instead of giving min, max, and steps values?
    Sorry for making the issue getting longer and longer... That is important because I am trying to decide whether it is best to continue with ext:chart capabilities or look for another graphics solution.

    Thanks.

  8. #8
    Member
    Join Date
    Mar 2011
    Location
    Toronto
    Posts
    2,490
    Be default it's not possible:

    The Gauge axis displays numeric data from an interval defined by the minimum, maximum and step configuration properties. The placement of the numeric data can be changed by altering the margin option that is set to 10 by default.
    http://docs.sencha.com/ext-js/4-1/#!...art.axis.Gauge

    But, maybe I misunderstood your question.

Similar Threads

  1. Replies: 2
    Last Post: Oct 11, 2012, 10:40 PM
  2. Chart Title or Text
    By sysmo in forum 2.x Help
    Replies: 0
    Last Post: Sep 05, 2012, 8:51 PM
  3. Replies: 2
    Last Post: Aug 13, 2012, 2:12 PM
  4. [CLOSED] changing title of a chart serie
    By feanor91 in forum 2.x Premium Help
    Replies: 7
    Last Post: May 22, 2012, 4:56 PM
  5. Replies: 5
    Last Post: Jun 19, 2009, 6:38 AM

Posting Permissions