[Chart][3D] Draw 3D shape cylinder ?

  1. #1

    [Chart][3D] Draw 3D shape cylinder ?

    Hello.

    I wonder is there anyway to draw 3d shape cylinder ?
    I saw 3D bar example on your website.
    But, our customers want to see 3D cylinder shape chart ^^
    I tried but, I couldn't

    Would you let me know how to draw 3d shape cylinder ?
    Thanks in advance.

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Refresh(object sender, EventArgs e)
        {
            this.Chart1.GetStore().DataBind();
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>3D Bar Chart - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <script>
            var refresh = function() {
                var chart = App.Chart1,
                    store = chart.getStore();
    
                chart.setAnimation({
                    duration: 500,
                    easing: 'easeInOut'
                });
    
                store.reload();
            };
    
            var switchTheme = function() {
                var chart = App.Chart1,
                    currentThemeClass = Ext.getClassName(chart.getTheme()),
                    themes = Ext.chart.theme,
                    themeNames = [],
                    currentIndex = 0,
                    name;
    
                for (name in themes) {
                    if (Ext.getClassName(themes[name]) === currentThemeClass) {
                        currentIndex = themeNames.length;
                    }
    
                    if (name !== 'Base' && name.indexOf('Gradients') < 0) {
                        themeNames.push(name);
                    }
                }
    
                chart.setTheme(themes[themeNames[++currentIndex % themeNames.length]]);
                chart.redraw();
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <h1>3D Bar Chart Example</h1>
    
            <p>This example shows how to create a 3D Bar chart much like the regular bar chart.</p>
    
            <ext:Panel
                runat="server"
                Width="650"
                Height="500"
                Layout="FitLayout">
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button runat="server" Text="Refresh" OnDirectClick="Refresh" />
                            <ext:Button runat="server" Text="Switch Theme" Handler="switchTheme" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:CartesianChart
                        ID="Chart1"
                        runat="server"
                        FlipXY="true"
                        InsetPadding="40"
                        Height="500">
                        <AnimationConfig Duration="500" Easing="EaseOut" />
                        <Store>
                            <ext:Store
                                runat="server"
                                Data="<%# Ext.Net.Examples.ChartData.GenerateData() %>"
                                AutoDataBind="true">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="Data1" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <Items>
                            <ext:TextSprite
                                Text="3D Bar Charts - Basic"
                                FontSize="22"
                                Width="100"
                                Height="30"
                                X="40"
                                Y="20" />
    
                            <ext:TextSprite
                                Text="Data: Browser Stats 2012 - Internet Explorer"
                                FontSize="10"
                                X="12"
                                Y="480" />
    
                            <ext:TextSprite
                                Text="Source: http://www.w3schools.com/"
                                FontSize="10"
                                X="12"
                                Y="495" />
                        </Items>
                        <Axes>
                            <ext:NumericAxis
                                Fields="Data1"
                                Position="Bottom"
                                Grid="true"
                                Maximum="100">
                                <Renderer Handler="return label.toFixed(0) + '%';" />
                            </ext:NumericAxis>
    
                            <ext:CategoryAxis
                                Fields="Name"
                                Position="Left"
                                Grid="true" />
                        </Axes>
                        <Series>
                            <ext:Bar3DSeries
                                XField="Name"
                                YField="Data1">
                                <StyleSpec>
                                    <ext:SeriesSprite Opacity="0.8" MinGapWidth="5" />
                                </StyleSpec>
                                <HighlightConfig>
                                    <ext:Sprite
                                        FillStyle="rgba(249, 204, 157, 1.0)"
                                        StrokeStyle="black"
                                        LineWidth="2" />
                                </HighlightConfig>
    
                                <Tooltip
                                    runat="server"
                                    TrackMouse="true"
                                    StyleSpec="background: #fff">
                                    <Renderer Handler="toolTip.setHtml(record.get('Name') + ': ' + record.get('Data1') + '%');" />
                                </Tooltip>
    
                                <Label
                                    Display="InsideEnd"
                                    Field="Data1" />
                            </ext:Bar3DSeries>
                        </Series>
                    </ext:CartesianChart>
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>
  2. #2
    Hello @wonjin.

    Sorry, having a custom shape on the bar chart out of the rectangular base is not currently supported.

    This is a feature absent from the underlying framework (ExtJS) and I couldn't find any discussion about plans on implementing this feature there. I also tried to assess if changing the shape was a matter of just changing x-y sides of the cube to a radius or diameter without success. It seems this feature would require full development before it can be made available.

    It would be a very nice option for bar charts nevertheless, and more shapes could be supported.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Draw > Basic > Pie Chart example is broken.
    By RCN in forum 3.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 20, 2015, 11:04 AM
  2. [CLOSED] Draw > Basic > Punch Chart example is broken.
    By RCN in forum 3.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 20, 2015, 11:04 AM
  3. Shape Slider component in Ext.NET?
    By fabricio.murta in forum 2.x Help
    Replies: 0
    Last Post: Oct 27, 2014, 4:52 PM
  4. [CLOSED] How to draw a custom line (solid, dotted) on chart at specific position?
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 07, 2014, 6:30 AM
  5. [CLOSED] Problem to draw a chart into a panel
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: May 23, 2012, 11:01 AM

Tags for this Thread

Posting Permissions