[Solved] More than one pie chart on a view

[Javad]

Hi 
I need to show a collection of pie charts on 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 on different runs of a selected poll (polls can be executed more than once). 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