This is a migrated thread and some comments may be shown as answers.

RadHtmlChart Height Issue

4 Answers 343 Views

Chart (HTML5)

This is a migrated thread and some comments may be shown as answers.

Venkata asked on 06 Jan 2016, 11:44 PM

htmlchart-height.jpg

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>

4 Answers, 1 is accepted

answered on 11 Jan 2016, 03:32 PM

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

answered on 22 Jan 2016, 09:05 PM

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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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;

}

answered on 26 Jan 2016, 04:32 PM

Chart.zip

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadHtmlChart Height Issue

4 Answers, 1 is accepted