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

Pie chart Questions

7 Answers 649 Views

Chart (HTML5)

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

Marcus asked on 03 Apr 2014, 01:01 AM

radhtmlchart.jpg

Hello,
I'm trying to add a databound pie chart to a page and have a few questions/problems (please let me know if you need me to create separate threads for each question).
All questions reference code or attachment below.

1. is there a quick/easy way to set the item with the highest value to exploded? Or do I have to iterate through the datatable?
2. alternatively to (1) I tried to manually set one of the items to exploded (see code), but that's giving me "index out of range" errors. When checking the contents of the "kpi" object in VS, the pieSeriesItems collection is empty - ???
3. How can I "omit" a specific color? The tooltips for the black color are black text on black background and are unreadable.
4. The pie chart for some reason doesn't have the "3D" effect as some of the samples do. Is the effect dependent on a certain size?
5. The chart has a lot of unnecessary white space. (see attached image) I'm only setting the width of the HTMLChart - if I set the height, the chart becomes smaller (i.e. the relative white space remains the same). Is there a way around this?
6. Suggestion: the HTMLChart control doesn't honor the RadFormDecorator settings (like RoundedCorners). It would be nice if it did that. In addition, a drop-shadow functionality would be nice to have too (IIRC, the MS Ajax Chart controls had that too).

Thx in advance for help and/or pointers !
Rgds - Marcus.

01.KPIMetricsChart.DataSource = ds.Tables[7];

02.KPIMetricsChart.DataBind();

03.PieSeries kpi = new PieSeries();

04.kpi.DataFieldY = "Cnt";

05.kpi.LabelsAppearance.Visible = false;

06.kpi.SeriesItems[4].Exploded = true; // <- DOES NOT WORK

07.kpi.TooltipsAppearance.ClientTemplate = "#=dataItem.Action#<br />#=dataItem.Cnt# Items, #= kendo.format(\\'{0:P}\\',percentage) #";

08.KPIMetricsChart.ChartTitle.Text = "Global Metrics";

09.KPIMetricsChart.PlotArea.Series.Add(kpi);

7 Answers, 1 is accepted

answered on 07 Apr 2014, 12:16 PM

Hi Marcus,

Please find my answers to your questions as follows:
1) Highest item value to explode - You can either iterate through the data source and change the corresponding row on the server or iterate through the chart's items on the client and explode the max value item. For example:
JavaScript:

function pageLoad() {

var chart = $find("PieChart1");

var items = chart._chartObject.options.series[0].data;

var maxItemValue = items[0].value;

var maxItemIndex = 0;

for (var i = 0; i < items.length; i++) {

if (items[i].value > maxItemValue) {

maxItemValue = items[i].value;

maxItemIndex = i;

}

items[maxItemIndex].explode = true;

chart.repaint();

}

ASPX:

<telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true" OnClientSeriesHovered="OnClientSeriesHovered">

<PlotArea>

<Series>

<telerik:PieSeries StartAngle="90">

<LabelsAppearance DataFormatString="{0} %" />

<TooltipsAppearance DataFormatString="{0} %">

</TooltipsAppearance>

<SeriesItems>

<telerik:PieSeriesItem BackgroundColor="Black" Exploded="true" Name="Internet Explorer" Y="18.3" />

<telerik:PieSeriesItem BackgroundColor="Orange" Exploded="false" Name="Firefox" Y="35.8" />

<telerik:PieSeriesItem BackgroundColor="Green" Exploded="false" Name="Chrome" Y="38.3" />

<telerik:PieSeriesItem BackgroundColor="Blue" Exploded="false" Name="Safari" Y="4.5" />

<telerik:PieSeriesItem BackgroundColor="Red" Exploded="false" Name="Opera" Y="2.3" />

</SeriesItems>

</telerik:PieSeries>

</Series>

</PlotArea>

<ChartTitle Text="Browser Usage for April 2012">

</ChartTitle>

</telerik:RadHtmlChart>

2) The chart has an entirely client-side rendering and therefore there are no server-side events. More information on the matter is available in this Known Limitations article. If you want to modify a series item on the server for a data bound chart you must modify the data source.

3) You can handle the series hover event and change the color. For example:
JavaScript:

function OnClientSeriesHovered(sender, args) {

setTimeout(function () {

if (args.get_dataItem().color == "#000000") {

document.getElementsByClassName("k-tooltip")[0].style.color = "rgb(222,11,11)";

}

}, 0);

}

ASPX:
see the markup from step 1).

4) 3D effect - By "3D effect" I guess you mean the gradient color. Could you provide us with a simple markup of the problematic chart as well as with your environment setup (e.g., version of Telerik UI controls, browser name and version, etc.)?

5)Chart space - You can set a particular margin for the PlotArea:
ASPX:

<PlotArea>

<Appearance>

<TextStyle Margin="-20" />

</Appearance>

<Series>

<telerik:PieSeries StartAngle="90">

...

</telerik:PieSeries>

</Series>

</PlotArea>

6) RadHtmlChart and RadFormDecorator integration - Generally the RadFormDecorator applies rounded corners to HTML elements like textboxes, textareas and fieldsets while the RadHtmlChart doesn't have such elements but renders as SVG. Could you please elaborate more into which elements of the chart is your requirement related to? Could you also elaborate more into which chart elements you would like to be shadowed?

Regards,
Danail Vasilev
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 07 Apr 2014, 10:52 PM

mychart.jpg

mschart.png

Danail,
thx for your reply, that was very helpful. I do have a few follow ups though:

1 + 2 + 5) I changed the db query to add an "exploded" field and also added the Margin value to the plot area. I does work, however the chart is now not centered (see attached MyChart.jpg).
3) I tried your code, but "args.get_dataItem().color" is null, so nothing is changed. Also I'm assuming "getElementsByClassName("k-tooltip")[0].style.color" is the background color of the tooltip (??). It would probably be enough to just set the font color to white, is that possible?
4) By 3D effect I was referring to what's shown here: http://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/piechart/defaultcs.aspx, compared to MyChart.jpg . The Telerik example has a kind of "embossed" effect.
6) see attached MSChart.png for an example of what I'm suggesting.

Thx again for your help!
Rgds - Marcus.

v.2014.1.225.40
MyChart markup

<telerik:RadHtmlChart runat="server" ID="KPIMetricsChart" Width="358px" height="365px" BorderColor="LightGray" BorderStyle="Solid" BorderWidth="1" OnClientSeriesHovered="OnClientSeriesHovered">

<PlotArea>

<Appearance>

<TextStyle Margin="-50" />

</Appearance>

</PlotArea>

</telerik:RadHtmlChart>

Code Behind

KPIMetricsChart.DataSource = ds.Tables[7];

KPIMetricsChart.DataBind();

PieSeries kpi = new PieSeries();

kpi.DataFieldY = "Cnt";

kpi.ExplodeField = "Exploded";

kpi.LabelsAppearance.Visible = false;

kpi.StartAngle = 90;

kpi.TooltipsAppearance.ClientTemplate = "#=dataItem.Action#<br />#=dataItem.Cnt# Items, #= kendo.format(\\'{0:P}\\',percentage) #";

KPIMetricsChart.ChartTitle.Text = "Global Metrics";

KPIMetricsChart.PlotArea.Series.Add(kpi);

answered on 10 Apr 2014, 01:58 PM

RadHtmlChart-PieSeries.zip

Hello Marcus,

Straight to your questions:

1) Center chart. - You can set particular margin values for top,right, bottom and left sides, so that you center the chart as desired. For example:
ASPX:

<telerik:RadHtmlChart runat="server" ID="KPIMetricsChart" Width="358px" Height="365px" OnClientSeriesHovered="OnClientSeriesHovered">

<PlotArea>

<Appearance>

<TextStyle Margin="-50 -65 -50 -50" />

</Appearance>

</PlotArea>

</telerik:RadHtmlChart>

2) Modify colors of tooltips - The color field is available only for declarative charts. For a data bound chart you can refer directly to the data source field name. For example:
JavaScript:

<script>

function OnClientSeriesHovered(sender, args) {

setTimeout(function () {

//debugger;

if (args.get_dataItem().myColor == "blue") {

document.getElementsByClassName("k-tooltip")[0].style.color = "white";

}

}, 0);

}

</script>

C#:

protected void Page_Load(object sender, EventArgs e)

{

KPIMetricsChart.DataSource = GetData();

KPIMetricsChart.DataBind();

PieSeries kpi = new PieSeries();

kpi.DataFieldY = "Cnt";

kpi.ExplodeField = "Exploded";

kpi.ColorField = "myColor";

kpi.LabelsAppearance.Visible = false;

kpi.StartAngle = 90;

kpi.TooltipsAppearance.ClientTemplate = "#=dataItem.Action#<br />#=dataItem.Cnt# Items, #= kendo.format(\\'{0:P}\\',percentage) #";

KPIMetricsChart.ChartTitle.Text = "Global Metrics";

KPIMetricsChart.PlotArea.Series.Add(kpi);

}

protected DataTable GetData()

{

DataTable dt = new DataTable();

dt.Columns.Add("ID", typeof(int));

dt.Columns.Add("Cnt", typeof(double));

dt.Columns.Add("Exploded", typeof(bool));

dt.Columns.Add("Action", typeof(string));

dt.Columns.Add("myColor", typeof(string));

dt.Rows.Add(1, 10, false, "action1", "red");

dt.Rows.Add(2, 20, false, "action2", "blue");

dt.Rows.Add(3, 15, false, "action3", "green");

dt.Rows.Add(4, 20, false, "action4", "orange");

dt.Rows.Add(5, 40, true, "action5", "yellow");

return dt;

}

I am not sure, however, whether there is a way of obtaining the color of a hovered/clicked item if the chart is data bound and the ColorField property is not specified.

Tooltips are rendered as pure HTML, so that it is fine to define "white" color for them.

4) By 3D effect. - I am unable to reproduce the mentioned issue. Could you provide us with the following information:
- If you are not using the latest official version of Telerik UI - 2014.1.403, does upgrading to it resolves the issue?
- Is the issue reproducible in all major browsers or it is a browser specific? If so which is the problematic browsers and its version?

6) Rounder corners and shadows - The chart is wrapped inside a div element, so that you can use CSS3 in order to achieve that effect:

<style>

#KPIMetricsChart {

border: 1px solid LightGray;

border-radius: 10px;

-webkit-box-shadow: 32px 36px 18px -14px rgba(131,144,179,1);

-moz-box-shadow: 32px 36px 18px -14px rgba(131,144,179,1);

box-shadow: 32px 36px 18px -14px rgba(131,144,179,1);

}

</style>

You can also find the full runnable VS example in the attached archive.

Regards,
Danail Vasilev
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 10 Apr 2014, 10:58 PM

Danail,
thx again for your help - much appreciated!

Regarding the 3d effect, I wired up your example to my datasource and ran it on my dev workstation and the 3d effect renders fine.
I figured something must be conflicting, so I started to add components from my page to your example. It turns out that the RadSkinManager with certain skins (I'm using the MetroTouch skin) disables/overrides the gradients for the 3d effect.
If I set the skin of the piechart (and the other charts) to "none" all the fonts and other styles don't match anymore and I'm guessing it's probably easier to override the "fill" directives, than to set the fonts, sizes etc.. Can you post (or let me know where to find) a list of the necessary css classes to override for the 3d effect?

Regarding the rounded corners and shadows, I agree that CSS3 is an option, but obviously this is dependent on the browser capabilities. The easy part of the MS Chart controls is that you could specify these settings declaratively or in code-behind, and the control would just take care of the rest without having to worry about bowser vendor/version. Granted, the MS Chart controls created dynamic bitmaps, and not svg, so I'm not sure if this would actually be possible.
Again, it was just a suggestion :)

Thx again!
Marcus.

answered on 15 Apr 2014, 11:19 AM

Hi Marcus,

The gradient color (i.e., 3d effect) is explicitly removed for BlackMetroTouch, Metro, MetroTouch and Simple skins due to design considerations with these skins. If you want skins that have gradient color you can use the rest skins. You may also find useful this feedback item on the matter.

As for the rounded corners and shadows effects in older browsers you can refer to this and this forum posts that shed more light on the matter.

Regards,
Danail Vasilev
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 17 Mar 2016, 06:17 AM

I am trying to use the below function for exploding the maximum value of radhtmlchart donut series.

But its not working for me.

Kindly advise.

answered on 17 Mar 2016, 08:05 AM

Hello Sumit,

The provided JavaScript code works properly on my side for a declaratively created chart. For example:

ASPX:

<script>

function pageLoad() {

var chart = $find("PieChart1");

var items = chart._chartObject.options.series[0].data;

var maxItemValue = items[0].value;

var maxItemIndex = 0;

for (var i = 0; i < items.length; i++) {

if (items[i].value > maxItemValue) {

maxItemValue = items[i].value;

maxItemIndex = i;

}

items[maxItemIndex].explode = true;

chart.repaint();

}

</script>

<telerik:RadHtmlChart runat="server" ID="PieChart1" Width="500" Height="500" Transitions="true">

<Appearance>

<FillStyle BackgroundColor="White"></FillStyle>

</Appearance>

<ChartTitle Text="OS Usage Statistics for December 2012">

<Appearance Align="Center" Position="Top"></Appearance>

</ChartTitle>

<PlotArea>

<Series>

<telerik:DonutSeries>

<LabelsAppearance Visible="false">

</LabelsAppearance>

<TooltipsAppearance DataFormatString="{0}%" BackgroundColor="White"></TooltipsAppearance>

<SeriesItems>

<telerik:PieSeriesItem BackgroundColor="#00adcc" Name="Win7" Y="55.6"></telerik:PieSeriesItem>

<telerik:PieSeriesItem BackgroundColor="#cccccc" Name="Win8" Y="2.5"></telerik:PieSeriesItem>

<telerik:PieSeriesItem BackgroundColor="#999999" Name="Vista" Y="2.8"></telerik:PieSeriesItem>

<telerik:PieSeriesItem BackgroundColor="#888888" Name="NT" Y="1.8"></telerik:PieSeriesItem>

<telerik:PieSeriesItem BackgroundColor="#777777" Name="WinXP" Y="21.1"></telerik:PieSeriesItem>

<telerik:PieSeriesItem BackgroundColor="#666666" Name="Linux" Y="4.7"></telerik:PieSeriesItem>

<telerik:PieSeriesItem BackgroundColor="#555555" Name="Mac" Y="8.7"></telerik:PieSeriesItem>

<telerik:PieSeriesItem BackgroundColor="#444444" Name="Mobile" Y="2.2"></telerik:PieSeriesItem>

</SeriesItems>

</telerik:DonutSeries>

</Series>

</PlotArea>

</telerik:RadHtmlChart>

If the chart, however, is data-bound you should get the data source on the client-side modify the explode field and then rebind the chart. See an example here - http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/client-side-programming/overview#modify-the-radhtmlcharts-data-source-on-the-client

Regards,
Danail Vasilev
Telerik

Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.