Some components doens't work/show

2 posts, 0 answers
  1. Tom
    Tom avatar
    1 posts
    Member since:
    May 2019

    Posted 22 May 2019 Link to this post

    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>

  2. Tsvetomir
    Admin
    Tsvetomir avatar
    754 posts

    Posted 24 May 2019 Link to this post

    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.
Back to Top