RadHtmlChart Height Issue

4 posts, 0 answers
  1. Venkata
    Venkata avatar
    126 posts
    Member since:
    Nov 2009

    Posted 06 Jan Link to this post

    Hi i am using 2015.1.401.40 version.

    and i am trying to show product summary chart but the height 100% is not working(please see attached screen shot).

    And how do i set Totals/Counts always show on the bottom(if user scrolls then only products section move)

    here is my code 

    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="100%" Height="100%"
           Skin="Bootstrap">
           <ChartTitle Text="Product Summary">
           </ChartTitle>
           <PlotArea>
               <Series>
                   <telerik:BarSeries Name="Total" DataFieldY="Total">
                       <TooltipsAppearance>
                           <ClientTemplate>
                                #=dataItem.Productname# Total Counts: <b>#=dataItem.Total#</b
                           </ClientTemplate>
                       </TooltipsAppearance>
                       <LabelsAppearance Visible="false">
                       </LabelsAppearance>
                   </telerik:BarSeries>
               </Series>
               <XAxis DataLabelsField="productname">
                   <MinorGridLines Visible="false"></MinorGridLines>
                   <MajorGridLines Visible="false"></MajorGridLines>
               </XAxis>
               <YAxis>
                   <LabelsAppearance DataFormatString="{0}" Mirror="true">
                   </LabelsAppearance>
                   <MinorGridLines Visible="false"></MinorGridLines>
               </YAxis>
           </PlotArea>
           <Legend>
               <Appearance Visible="false">
               </Appearance>
           </Legend>
       </telerik:RadHtmlChart>

  2. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 11 Jan Link to this post

    Hi Venkata,

    Is there a chance that the used by you HtmlChart is wrapped into initially not visible parent (e.g. a PageView)? I am asking you that as in such scenarios you will need to redraw() / repaint() the chart manually once it gets visible in order for it to calculate its size properly.

    There is also an already fixed issue on the matter, which is fixed after the used by you version has been released, so you can try the workarounds suggested there: RadHtmlChart is not rendered when initially hidden wrapper becomes visible

    If this does not help, please, send us a sample runnable page where both of the reported issue scan be reproduced, so can examine them locally and advice you further.

    Regards,
    Vessy
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Venkata
    Venkata avatar
    126 posts
    Member since:
    Nov 2009

    Posted 22 Jan in reply to Vessy Link to this post

    I am NOT doing any initially not visible option. Please find attached sample page with date( i had set Height 100% but not working).
    And how do i set different colors for each bar?

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="RadGraphTest.WebForm1" %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html>
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <div>
            <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="100%" Height="100%">
                <PlotArea>
                    <Series>
                        <telerik:BarSeries Name="Products" DataFieldY="Total">
                            <TooltipsAppearance Color="White">
                            </TooltipsAppearance>
                            <LabelsAppearance Visible="false">
                            </LabelsAppearance>
                        </telerik:BarSeries>
                    </Series>
                    <XAxis DataLabelsField="MatterName">
                        <MinorGridLines Visible="false"></MinorGridLines>
                        <MajorGridLines Visible="false"></MajorGridLines>
                    </XAxis>
                    <YAxis>
                        <LabelsAppearance>
                        </LabelsAppearance>
                        <MinorGridLines Visible="false"></MinorGridLines>
                    </YAxis>
                </PlotArea>
                <Legend>
                    <Appearance Visible="false">
                    </Appearance>
                </Legend>
                <ChartTitle Text="Matter Summary">
                </ChartTitle>
            </telerik:RadHtmlChart>
        </div>
        </form>
    </body>
    </html>

     

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
     
    namespace RadGraphTest
    {
        public partial class WebForm1 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                RadHtmlChart1.DataSource = GetData();
                RadHtmlChart1.DataBind();
            }
     
            private DataTable GetData()
            {
                DataTable dt = new DataTable("MatterData");
                dt.Columns.Add("MatterID", Type.GetType("System.Int32"));
                dt.Columns.Add("MatterName", Type.GetType("System.String"));
                dt.Columns.Add("LeadCount", Type.GetType("System.Int32"));
                dt.Columns.Add("PlaintiffCount", Type.GetType("System.Int32"));
                dt.Columns.Add("Total", Type.GetType("System.Int32"));
     
     
              
     
                dt.Rows.Add(23, "Actos",    68, 154,    222);
                dt.Rows.Add(83, "Actos - Funding",  1,  1,  2);
                dt.Rows.Add(176, "Asbestos",    1,  4,  5);
                dt.Rows.Add(9,  "Benicar",  98, 66, 164);
                dt.Rows.Add(94, "BP Oil Spill - Funding",   2,  0,  2);
                dt.Rows.Add(178, "Civil Action No. 08-C-2080",  3,  0,  3);
                dt.Rows.Add(175, "Clomid",  1,  14, 15);
                dt.Rows.Add(34, "Crestor- Brenner-Finson",  0,  24, 24);
                dt.Rows.Add(1,  "CW - Test Topic-BT",   5,  4,  9);
                dt.Rows.Add(181, "CW_TEST2",    0,  5,  5);
                dt.Rows.Add(184, "CWKKSTesting",    0,  1,  1);
                dt.Rows.Add(5,"Cymbalta",   9,  824,    833);
                dt.Rows.Add(59, "Depuy - Funding",  0,  1,  1);
                dt.Rows.Add(168, "Dialysis - J. Shafer Law",    1,  0,  1);
                dt.Rows.Add(106, "Dog Bite - Funding",  1,  0,  1);
                dt.Rows.Add(61, "Employment Issues - Funding",  3,  0,  3);
                dt.Rows.Add(179,"Fanduel",  1,  0,  1);
                dt.Rows.Add(174,"IVC Filter",   0,  50, 50);
                dt.Rows.Add(66, "JL CASES", 18, 2,  20);
                dt.Rows.Add(54, "Law Firm - Funding",   15, 3,  18);
                dt.Rows.Add(172,"Levaquin - J. Shafer Law", 0,  11, 11);
                dt.Rows.Add(39, "Lipitor (Brenner-Finson)", 36, 11, 47);
                dt.Rows.Add(161,"Lipitor - J. Shafer Law",  16, 148,    164);
                dt.Rows.Add(171,"Lung Cancer / Asbestos Exposure - J. Shafer Law",  2,  3,  5);
                dt.Rows.Add(152,"Medical Malpractice - Attorney Request",   1,  0,  1);
                dt.Rows.Add(120, "Medical Malpractice - Funding", 2, 0, 2);
                dt.Rows.Add(170,"Metal Hip Implant - J. Shafer Law",    0,  16, 16);
                dt.Rows.Add(7,  "Mirena",   85, 201,    286);
                dt.Rows.Add(169,"Mirena - J. Shafer Law",   0,  18, 18);
                dt.Rows.Add(122,"Mirena IUD - Funding", 2,  0,  2);
                dt.Rows.Add(177,"Mirena Migration", 1,  0,  1);
                dt.Rows.Add(160,"Miscellaneous Cases",  43, 120,    163);
                dt.Rows.Add(58, "MVA - Funding",    16, 4,  20);
                dt.Rows.Add(157,"NFL - Funding",    1,  0,  1);
                dt.Rows.Add(46, "Nuvaring", 7,  1,  8);
                dt.Rows.Add(131,"Premises Liability/Negligence - Funding",  1,  0,  1);
                dt.Rows.Add(158,"Prozac",   7,  0,  7);
                dt.Rows.Add(20, "PTC-(Hood)",   3,  116,    119);
                dt.Rows.Add(33, "PTC-Kirtland & Packard",   0,  31, 31);
                dt.Rows.Add(11, "PTCO", 414,    227,    641);
                dt.Rows.Add(41, "PTCO-Depo",    20, 112,    132);
                dt.Rows.Add(45, "PTCO-Implanon",    8,  1,  9);
                dt.Rows.Add(44, "PTCO-Ortho",   6,  38, 44);
                dt.Rows.Add(40, "PTCO-Unknown", 17, 18, 35);
                dt.Rows.Add(43, "PTCO-Yaz/Yasmin",  6,  19, 25);
                dt.Rows.Add(60, "Reglan & Metoclopramide - Funding",    1,  0,  1);
                dt.Rows.Add(48, "Risperdal",    11, 29, 40);
                dt.Rows.Add(57, "Risperdal - Funding",  7,  1,  8);
                dt.Rows.Add(166,"isperdal - J. Shafer Law", 2,  7,  9);
                dt.Rows.Add(153, "SJS", 9,  0,  9);
                dt.Rows.Add(56, "Slip and Fall - Funding",  9,  1,  10);
                dt.Rows.Add(21, "SSRI", 37, 10, 47);
                dt.Rows.Add(37, "SSRI-Hood",    0,  1,  1);
                dt.Rows.Add(155,"T-Mesh",   1,  16, 17);
                dt.Rows.Add(38, "Talc-Beasley Allen",   372,    155,    527);
                dt.Rows.Add(165,"Talcum Powder - J. Shafer Law",    1,  21, 22);
                dt.Rows.Add(68, "TCM Attorney Lending Firms",   6,  0,  6);
                dt.Rows.Add(12, "TCM Defense Law Firm", 12, 0,  12);
                dt.Rows.Add(67, "TCM Judiciary",    2,  0,  2);
                dt.Rows.Add(16, "TCM Lead Generation",  5,  0,  5);
                dt.Rows.Add(71, "TCM Legal Service Firm",   5,  0,  5);
                dt.Rows.Add(17, "TCM Lien Resolution",  4,  0,  4);
                dt.Rows.Add(74, "TCM Non-profit Political Action Firm", 1,  0,  1);
                dt.Rows.Add(8,  "TCM Plaintiff Law Firm",   45, 0,  45);
                dt.Rows.Add(72, "TCM Qualified Settlement Funding Firm",    2,  0,  2);
                dt.Rows.Add(73, "TCM Records Acquisition Firm", 1,  0,  1);
                dt.Rows.Add(70, "TCM Special Masters, Arbitrators, Mediators",  2,  0,  2);
                dt.Rows.Add(24, "Testing Matter",   1,  0,  1);
                dt.Rows.Add(162,"Testosterone Supplement - J. Shafer Law",  15, 82, 97);
                dt.Rows.Add(163,"Transvaginal Mesh: Non-Revision - J. Shafer Law",  35, 276,    311);
                dt.Rows.Add(164,"Transvaginal Mesh: Revision - J. Shafer Law",  54, 224,    278);
                dt.Rows.Add(52, "TVM - Attorney Referral",  1,  0,  1);
                dt.Rows.Add(55, "TVM - Funding",    49, 15, 64);
                dt.Rows.Add(50, "TVM - NEEDS ATTORNEY", 1,  0,  1);
                dt.Rows.Add(-1, "Unassigned Lead",  4,  3,  7);
                dt.Rows.Add(30, "Valic",    360,    376,    736);
                dt.Rows.Add(82, "Valic -Have not had contact with Bell",    1626,   3,  1629);
                dt.Rows.Add(26, "Valley Fever - Federal",   0,  1,  1);
                dt.Rows.Add(27, "Valley Fever - Individual Not Incarcerated",   0,  2,  2);
                dt.Rows.Add(25, "Valley Fever - Jackson Incarcerated",  0,  1,  1);
                dt.Rows.Add(28, "Valley Fever - Jackson Not Incarcerated",  0,  1,  1);
                dt.Rows.Add(167, "Viagra/Melanoma - J. Shafer Law", 3,  11, 14);
                dt.Rows.Add(151,"Wrongful Arrest - Attorney Request",   1,  0,  1);
                dt.Rows.Add(63, "Wrongful Death- Funding",  0,  1,  1);
                dt.Rows.Add(22, "Xarelto", 51,  12, 63);
                dt.Rows.Add(64, "Xarelto - Funding",    1,  0,  1);
                dt.Rows.Add(173,"Xarelto - J. Shafer Law",  20, 200,    220);
                dt.Rows.Add(65, "Zimmer NexGen Knee Replacement - Funding", 0,  3,  3);
                dt.Rows.Add(6,  "Zofran",   319,    417,    736);
                dt.Rows.Add(159,"Zoloft",   0,  2,  2);
     
                return dt;
            }
        }
    }

  5. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 26 Jan Link to this post

    Hi Venkata,

    The HtmlChart in the provided project is not sized to 100% of the page, as its parent size is not configured thus the default size of the control is set. In order to make the control occupy 100% of a container's size you have to make sure that all of its parent's size is also configure in percents (up to a parent with a fixed size). This is valid for every HTML page with size set in percents and is not anything specific to RadHtmlChart but is rather a general programming issue.

    As for that how to set different color for each bar in the chart, you can use the ColorField property of a BarSeries, defining the desired colors in the passed:
    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="100%" Height="100%">
        <PlotArea>
            <Series>
                <telerik:BarSeries Name="Products" DataFieldY="Total" ColorField="Colors">
                    ..
                </telerik:BarSeries>
            </Series>
            ..
        </PlotArea>
    </telerik:RadHtmlChart>

    For convenience I am attaching the modified version of your code so you can examine it on your side.

    Regards,
    Vessy
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top