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
0
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
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
0
Venkata
Top achievements
Rank 1
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?
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;
}
}
}
0
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:
For convenience I am attaching the modified version of your code so you can examine it on your side.
Regards,
Vessy
Telerik
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
0
Goce
Top achievements
Rank 1
answered on 04 Apr 2017, 03:36 PM
Count the rows that you are binding to the selected chart and multiply them by 20 :)
int rcHeight = data.Count() * 20;
radChart.Height = rcHeight;
there you have dynamic height of the selected chart.