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

Some components doens't work/show

1 Answer 122 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Tom
Top achievements
Rank 1
Tom asked on 22 May 2019, 08:53 AM

So I've been trying out kendo core components and cannot get it to work with the sample codes from core.
Some components such as Autocomplete and Datepicker does work but when trying out for example a pie chart the component does not show for some reason. 

Any suggestions on what the problem could be?

I've added pngs for the code below.

This works:

<div class="cards" style="height: 60%; flex-direction: row">
                <div class="card mb-3 shadow card-theme" style="width: 35%; max-height: 100%; margin-right:20px;">
                    <div class="card-body" style="flex-direction:row">
                        <div id="phoenixPieChart" style="width:100%; height:50%;">
                             
                                @(Html.Kendo().DatePicker()
                                    .Name("DatePicker")
                                )
                        </div>
                </div>
        </div>
</div>

This doens't work:

<div class="cards" style="height: 60%; flex-direction: row">
                <div class="card mb-3 shadow card-theme" style="width: 35%; max-height: 100%; margin-right:20px;">
                    <div class="card-body" style="flex-direction:row">
                        <div id="phoenixPieChart" style="width:100%; height:50%;">
                                @(Html.Kendo().Chart()
                                            .Name("chart")
                                                    .Title(title => title
                                                        .Text("Share of Internet Population Growth, 2007 - 2012")
                                                        .Position(ChartTitlePosition.Bottom))
                                            .Legend(legend => legend
                                                .Visible(false)
                                            )
                                            .ChartArea(chart => chart
                                                .Background("transparent")
                                             )
                                            .HtmlAttributes(new { style = "background: center no-repeat url(" + @Url.Content("~/shared/world-map.png") })
                                            .Series(series =>
                                            {
                                                series.Pie(new dynamic[] {
                                        new {category="Asia",value=53.8,color="#9de219"},
                                        new {category="Europe",value=16.1,color="#90cc38"},
                                        new {category="LatinAmerica",value=11.3,color="#068c35"},
                                        new {category="Africa",value=9.6,color="#006634"},
                                        new {category="MiddleEast",value=5.2,color="#004d38"},
                                        new {category="NorthAmerica",value=3.6,color="#033939"}
                                                })
                                                .Labels(labels => labels
                                                    .Template("#= category #: \n #= value#%")
                                                    .Background("transparent")
                                                    .Visible(true)
                                                )
                                                .StartAngle(150);
                                            })
                                            .Tooltip(tooltip => tooltip
                                                .Visible(true)
                                                .Format("{0}%")
                                            )
                                )
                             
                        </div>
                </div>
         </div>
  </div>

1 Answer, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 24 May 2019, 02:47 PM
Hi Tom,

Thank you for the provided code snippets along with screenshots. 

I have taken the Kendo UI Chart widget's declaration as is and it appears to be working as expected on my side. Here is a screenshot:

https://www.screencast.com/t/Sp8gEe3c

I am also attaching a sample project in which the Kendo UI Chart could be seen. In case the issue persists, modify the project in order to replicate the issue and send it back to me.


Best regards,
Tsvetomir
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
General Discussions
Asked by
Tom
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Share this question
or