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
>