[CLOSED] how to dispaly Tooltip for stack chart

  1. #1

    [CLOSED] how to dispaly Tooltip for stack chart

    HI Daniil

    Can you please help me to display tool tip for stack chart, please find the code and screenshot

    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <%@ Import Namespace="System.Xml" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Import Namespace="System.Data.SqlClient" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Import Namespace="Ext.Net" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server"> 
         protected void Page_Load(object sender, EventArgs e)
        {
    
            if (!X.IsAjaxRequest)
            {
                try
                { 
                    BindRecords();
                }
                catch (System.Data.SqlClient.SqlException ex)
                {
                    string strin = ex.ToString();
                }
            }
        }
    
        public void BindRecords()
        {
            DataTable dtSpiCpi = new DataTable();
            dtSpiCpi.Locale = System.Globalization.CultureInfo.InvariantCulture;
            dtSpiCpi.Columns.Add("MonthNYear", typeof(string));
            dtSpiCpi.Columns.Add("Column1", typeof(decimal));
            dtSpiCpi.Columns.Add("Column2", typeof(decimal));
            dtSpiCpi.Columns.Add("Column3", typeof(decimal));
            dtSpiCpi.Columns.Add("Column4", typeof(decimal));
            dtSpiCpi.Columns.Add("Column5", typeof(decimal));
    
            DataRow objRow = null;
    
            for (int index = 1; index <= 12; index++)
            {
                objRow = dtSpiCpi.NewRow();
                objRow["MonthNYear"] = index + "Jan15";
    
                if (index < 3)
                {
                    objRow["Column1"] = Convert.ToDecimal("2.50");
                    objRow["Column3"] = Convert.ToDecimal("2.10");
                    objRow["Column4"] = Convert.ToDecimal("2.00");
                    objRow["Column2"] = Convert.ToDecimal("1.0");
                    objRow["Column5"] = Convert.ToDecimal("1.9");
                }
                else if (index < 5)
                {
                    objRow["Column1"] = Convert.ToDecimal("1.0");
                    objRow["Column2"] = Convert.ToDecimal("2.0");
                    //objRow["Column3"] = Convert.ToDecimal("3.0");
                    objRow["Column4"] = Convert.ToDecimal("4.0");
                    objRow["Column5"] = Convert.ToDecimal("2.9");
                }
                else if (index < 7)
                {
                    //objRow["Column1"] = Convert.ToDecimal("9.0");
                    objRow["Column2"] = Convert.ToDecimal("3.0");
                    objRow["Column3"] = Convert.ToDecimal("2.0");
                    objRow["Column4"] = Convert.ToDecimal("3.0");
                    objRow["Column5"] = Convert.ToDecimal("3.9");
    
                }
                else
                {
                    objRow["Column1"] = Convert.ToDecimal("4.9");
                    objRow["Column2"] = Convert.ToDecimal("3.0");
                    objRow["Column3"] = Convert.ToDecimal("2.0");
                    objRow["Column4"] = Convert.ToDecimal("1.0");
                    objRow["Column5"] = Convert.ToDecimal("5.9");
    
                }
                //objRow["Column5"] = Convert.ToDecimal("4.9");
                dtSpiCpi.Rows.Add(objRow);
            }
             
            storeFillRate.RemoveAll();
             
    
            storeFillRate.DataSource = dtSpiCpi;
            storeFillRate.DataBind();
    
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Submit MultiSelect Values - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="" />
            <table border="1">
                <tr>
                    <td>
                       <%-- <ext:ChartTheme ID="ChartTheme1" runat="server" ThemeName="CustomBlue">
                            <Axis Stroke="Black" />
                            <AxisLabelLeft Font="normal 11px Arial" StrokeWidth="0.5" />
                            <AxisLabelBottom Font="normal 11px Arial" StrokeWidth="0.5" />
                        </ext:ChartTheme>--%>
                         
                        <ext:Panel ID="PanelYtd" runat="server" Width="1000" Border="false" Height="500" Layout="FitLayout">
                            <Items>
                                <ext:Chart ID="chartFillRate"  runat="server" Shadow="true" Animate="true" Width="955" Height="420">
                                    <Store>
                                        <ext:Store ID="storeFillRate" runat="server">
                                            <Model>
                                                <ext:Model ID="Model36" runat="server">
                                                    <Fields>
                                                        <ext:ModelField Name="MonthNYear" />
                                                        <ext:ModelField Name="Column1" />
                                                        <ext:ModelField Name="Column2" />
                                                        <ext:ModelField Name="Column3" />
                                                        <ext:ModelField Name="Column4" /> 
                                                        <ext:ModelField Name="Column5" /> 
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
                                    </Store>
                                    <LegendConfig Position="Bottom" BoxStroke="false" LabelFont="8.5pt Arial" />
                                    <Axes>
                                        <ext:NumericAxis Fields="Column1,Column2,Column3,Column4,Column5" Title="FTE">
                                            <Label FontSize="8.5pt" FontFamily="Arial" />
    
                                        </ext:NumericAxis>
                                        <ext:CategoryAxis Fields="MonthNYear" Position="Bottom" Title="Month Year">
                                            <Label FontFamily="Arial" FontSize="8.5" />
                                        </ext:CategoryAxis>
                                    </Axes>
                                    <Series>
                                        <ext:ColumnSeries Axis="Bottom"  XField="MonthNYear" YField="Column1,Column2,Column3,Column4"  Stacked="true" Highlight="true" ShowInLegend="true">
                                            <Tips ID="Tips1" runat="server" TrackMouse="true" Width="65" Height="28">
                                                <Renderer Handler="this.setTitle(String(item.value[1]) + 'M');" />
                                            </Tips>
                                            <Label FontFamily="Arial" FontSize="8.5px" />
                                        </ext:ColumnSeries>
                                        <ext:LineSeries Axis="Left"  XField="MonthNYear" YField="Column5" Title="FTE" Smooth="3">
                                            <MarkerConfig Fill="#FF0000"  Stroke="#FF0000" Type="Circle" Radius="2" StrokeWidth="1" />
                                            <Style Stroke="#FF0000" StrokeWidth="1" />
                                        </ext:LineSeries>
                                    </Series>
                                </ext:Chart>
                            </Items>
                        </ext:Panel>
    
                    </td>
                </tr>
            </table>
    
        </form>
    </body>
    </html>
    REgards
    PRaveen
    Attached Thumbnails Click image for larger version. 

Name:	Stack.png 
Views:	94 
Size:	18.6 KB 
ID:	24207  
    Last edited by Daniil; Sep 07, 2015 at 6:56 AM. Reason: Please use [CODE] tags, [CLOSED]
  2. #2
    Hi @praveencat123,

    Please use:
    <Tips runat="server" TrackMouse="true" Width="80" Height="28">
        <Renderer Handler="this.setTitle(item.yField + ': ' + item.value[1]);" />
    </Tips>
  3. #3

    Thanks daniil ....Its working

    Thanks daniil ....Its working


    Regards
    Praveen

Similar Threads

  1. [CLOSED] Scatter chart radius + tooltip
    By jchau in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: May 02, 2014, 7:13 PM
  2. Adding tooltip to pie chart.
    By KnowledgeSeeker in forum 2.x Help
    Replies: 6
    Last Post: Nov 07, 2013, 6:05 AM
  3. [CLOSED] Chart Tooltip auto width
    By Daly_AF in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 15, 2013, 12:05 AM
  4. [CLOSED] [#44] Bug in tooltip in chart or not?
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 10
    Last Post: Apr 19, 2013, 2:55 PM
  5. Replies: 2
    Last Post: Aug 13, 2012, 2:12 PM

Tags for this Thread

Posting Permissions