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

Pie Chart

12 Answers 243 Views

General Discussions

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

This question is locked. New answers and comments are not allowed.

12 Answers, 1 is accepted

answered on 31 Oct 2011, 03:36 PM

Cool. Brilliant timing!

But I have a problem: after upgrading the project our column charts are not rendered correctly. The column value is shown as label, but the column/bar is not there. In the definition of the svg i found something like this:

<g>

<path id="k39c7e96f4998ea09" fill="#205b02" stroke-opacity="1" fill-opacity="1" stroke-linecap="square" stroke-width="1" stroke="#1a4902" d="M119.5 NaN 236.5 NaN 236.5 NaN 119.5 NaN z">

<path id="k410ae768e145b027" fill="url(#k8a5374e6a0b36e61)" stroke-opacity="1" fill-opacity="1" stroke-linecap="square" stroke-width="1" stroke="#1a4902" d="M119.5 NaN 236.5 NaN 236.5 NaN 119.5 NaN z">

</g>

I think the NaN's there are the cause. Any hints?

Thanks!

answered on 31 Oct 2011, 05:45 PM

Hi Hristo,
I have no test project, but at least i figured out, when the problem occurs.
I created a new project and everything rendered fine. As soon as I included jquery-ui (Version 1.8.16 in my case)

<script src="/Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script>

the problem occured.
My snippets for including the telerik files are:

@(Html.Telerik().StyleSheetRegistrar()

.DefaultGroup(group => group

.Add("telerik.common.css")

.Add("telerik.telerik.min.css")

.Combined(true)

.Compress(true)))

and:

@(Html.Telerik().ScriptRegistrar()

.jQuery(false)

.DefaultGroup(group => group.Compress(true)))

Some output from firebug:

Unerwarteter Wert M169.5 NaN 353.5 NaN 353.5 NaN 169.5 NaN z beim Parsen des Attributs d.

Maybe this helps. Thanks.

Regards

answered on 03 Nov 2011, 05:56 PM

Hello Olav,

Thank you for the test project.

I have explored the problem and a possible solution could be to add the following code after the initialization of the JQuery UI:

<script type="text/javascript">

jQuery.extend(jQuery.easing, {

swing: function(p, n, firstNum, diff) {

return ((-Math.cos(p * Math.PI) / 2) + 0.5) * diff + firstNum;

}

});

</script>

I have update you telerik points.
All the best,
Hristo Germanov
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now

answered on 15 Jan 2013, 06:37 PM

Hi
I need to show a collection of pie charts in one page, but usually I see just the first one.
This is the scenario:
In a polling app using mvc 3 razor with Telerik controls I have a controller action that calculates the number of votes for any option an different runs of a selected poll. Then in the view, a for each loop iterates over the runs and calls a partial view with a single run info in order to draw a pie chart. Usually in the first page execution I have as many pie charts as expected, but its just by chance, sometimes just the first chart is visible and sometimes all.
I have checked the code that is rendered to the browser, all the required code and data are available there!
I have tries Html.Partial, Html.RenderPartial and Html.RenderAction but no difference. Charts have different names.
A live app with buggy output is at: http://polltech.vaiona.com/Reporting/Charts

The partial view code is like:

@model ChartModel

<fieldset>
<legend>@Model.Title</legend>
@{
var seriesModel = Model.SeriesList.First();
var dataPoints = seriesModel.Data.Cast<DataPoint>().ToList();
var totalSum = dataPoints.Sum(p => p.YAxisValue);
}
<div dir="ltr">
@{Html.Telerik().Chart<DataPoint>(dataPoints)
.Name("pieChart" + (new Random().Next()))
.Title(seriesModel.Label)
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.Series(series =>
{
series.Pie("YAxisValue", "HAxisValueString")
.Labels(labels => labels.Visible(true)
.Align(ChartPieLabelsAlign.Column)
.Position(ChartPieLabelsPosition.OutsideEnd))
.StartAngle(90).Padding(60)
.Name(seriesModel.Name);
})
//.DataBinding(dataBinding => dataBinding.Ajax().Select("_SpainElectricity", "Charts", new { id = 1}))
.Tooltip(tooltip => tooltip.Visible(true).Template("<#= dataItem.Extra #>%"))
.HtmlAttributes(new { style = "width: 500px; height: 400px;" })
.Render();
}
</div>
</fieldset>

and the output is (the interested segment only):

jQuery('#pieChart22293628').tChart({title:{"text":"جدید تر"}, legend:{"position":"bottom"}, series:[{"name":"Series5","type":"pie","field":"YAxisValue","categoryField":"HAxisValueString","explodeField":"","colorField":"","padding":60,"startAngle":90,"labels":{"visible":true,"position":"outsideEnd","align":"column"}}], dataSource:{"data":[{"HAxisValue":"\/Date(-62135596800000)\/","HAxisValueString":"خوب","SeriesIdentifier":1,"YAxisValue":1,"Extra":"25.00"},{"HAxisValue":"\/Date(-62135596800000)\/","HAxisValueString":"بد","SeriesIdentifier":2,"YAxisValue":2,"Extra":"50.00"},{"HAxisValue":"\/Date(-62135596800000)\/","HAxisValueString":"خیلی بد","SeriesIdentifier":3,"YAxisValue":1,"Extra":"25.00"}]}, tooltip:{"template":"\u003c#= dataItem.Extra #\u003e%","visible":true}});

jQuery('#pieChart22293628').tChart({title:{"text":"این هم شرح ندارد. ای بابا"}, legend:{"position":"bottom"}, series:[{"name":"Series1","type":"pie","field":"YAxisValue","categoryField":"HAxisValueString","explodeField":"","colorField":"","padding":60,"startAngle":90,"labels":{"visible":true,"position":"outsideEnd","align":"column"}}], dataSource:{"data":[{"HAxisValue":"\/Date(-62135596800000)\/","HAxisValueString":"خوب","SeriesIdentifier":1,"YAxisValue":3,"Extra":"18.00"},{"HAxisValue":"\/Date(-62135596800000)\/","HAxisValueString":"بد","SeriesIdentifier":2,"YAxisValue":6,"Extra":"37.00"},{"HAxisValue":"\/Date(-62135596800000)\/","HAxisValueString":"خیلی بد","SeriesIdentifier":3,"YAxisValue":7,"Extra":"43.00"}]}, tooltip:{"template":"\u003c#= dataItem.Extra #\u003e%","visible":true}});

Any help, sample code etc, is welcomed