I'm creating a dashboard. The backend database stores the type of telerik chart control should go into which box. Very simply is it even possible based on the data response to then add that telerik chart control to the corresponding div? Sample code below.
Anytime I attempt this there are javascript errors due to the HTML and javascript emitted from the toHtmlString() method.
However I see no other way to perform this based on the javascript setup.
At this point it's 100% static to determine if this is even feasible.
<script>
//pseudo code to get data from database
//now add the right control to the div
switch(controlType) {
case "grid":
break;
case "bar":
break;
case "pie":
$('#widgetcontrol' + widgetId).html('@(Html.Kendo().Chart()
.Name("pieChart")
.Legend(legend => legend
.Position(ChartLegendPosition.Top)
)
.ChartArea(chartArea => chartArea
.Background("transparent")
.Height(250)
)
.Series(series =>
{
series.Pie(new dynamic[]
{
new {category = "Test", value = 957, color = "#9de219"},
new {category = "Test 2", value = 124, color = "#90cc38"},
new {category = "Test 3", value = 567, color = "#068c35"},
new {category = "Test 4", value = 678, color = "#006634"},
})
.Labels(labels => labels
.Template("#= category #: \n #= value# (#= kendo.format('{0:P}', percentage)#)")
.Background("transparent")
.Visible(false)
)
.StartAngle(150);
})
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= category #: \n #= value# (#= kendo.format('{0:P}', percentage)#)")
).ToHtmlString())');
break;
case "counter":
break;