Is telerik MVC Charts supports for only one chart at a time in same page

Question

This is my source code. I m using telerik controls trial version. When I tried graphs , it shows only one at a time. Whether telerik supports more than one chart in the same page ?

My Index Page

<link href="@Url.Content("~/Content/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/examples-offline.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.dataviz.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>
<script src="@Url.Content("~/Scripts/console.min.js")"></script>
<script src="@Url.Content("~/Scripts/prettify.min.js")"></script>
    <div style="width: 30%; height: 10%">
        @Html.Partial("_PieSeries")
    </div>
    Hi
    <br />
    <div style="width: 30%; height: 10%">
        @Html.Partial("_BarSeries")
    </div>

_PieSeries

<div  >
    @(Html.Kendo().Chart()
        .Name("chart")
        .Title("Weekly Enagagement Allocation Status ")
        .Legend(legend => legend
            .Position(ChartLegendPosition.Bottom)
        )
        .Series(series =>
        {
            series.Pie(new dynamic[] {
                new { category = "Mumbai_IND_DC_A112", value = 12 },
                new { category = "Bejing_CHI_DC_A223", value = 68 },
                new { category = "Redmount_US_DC_B221", value = 49 }, 
                new { category = "Sydney_AUS_DC_B1989", value = 37 },              
                new { category = "DC_US_B1341", value = 17 },              
                new { category = "KPMG_US_DC_B1099", value = 57 },              
                new { category = "KPMG_CHI_DC_U9489", value = 67 },              
                new { category = "DI_US_DC_A1369", value = 87 },              
                new { category = "MIC_UK_DC_B1709", value = 27 },             
                new { category = "KPMG_UK_DC_B6990", value = 37 }                
            });
        })
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0}%")
        )
    )
</div>

_BarSeries

<div  >
    @(Html.Kendo().Chart()
        .Name("chart")
        .Title("Internet Users")
        .Legend(legend => legend
            .Position(ChartLegendPosition.Bottom)
        )
        .Series(series => {
            series.Column(new double[] { 15.7, 16.7, 20, 23.5, 26.6 }).Name("World");
            series.Column(new double[] { 67.96, 68.93, 75, 74, 78 }).Name("United States");
        })
        .CategoryAxis(axis => axis
            .Categories("2005", "2006", "2007", "2008", "2009")
        )
        .ValueAxis(axis => axis
            .Numeric().Labels(labels => labels.Format("{0}%"))
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0}%")
        )
    ) 
</div>

Answer 1

I think all you need to do is to change the Name property of one of your charts. Each chart needs to have a unique Name.

@(Html.Kendo().Chart()
    .Name("chart1")
    .Title("Weekly Enagagement Allocation Status ")

@(Html.Kendo().Chart()
    .Name("chart2")
    .Title("Internet Users")

If both charts have the same Name, only one chart will display.