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

Adding a chart dynamically

1 Answer 164 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Joseph Farrar
Top achievements
Rank 1
Joseph Farrar asked on 09 Nov 2017, 12:40 AM

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;

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 10 Nov 2017, 11:46 AM
Hello, Joseph,

The desired result can be achieved by using a Razor switch and the following syntax:

@switch (1) // controType
{
    case 1:
        <div class="demo-section k-content wide">
        @(Html.Kendo().Chart(Model)
        .Name("chart")
        .Title("Internet Users in United States")
        .Legend(legend => legend.Visible(false))
        .Series(series =>
        {
            series.Line(model => model.Value)
                .Name("United States").CategoryField("Year")
                .Labels(labels => labels.Format("{0}%").Visible(true));
        })
        .CategoryAxis(axis => axis
            .MajorGridLines(lines => lines.Visible(false))
        )
        .ValueAxis(axis => axis.Numeric()
            .Labels(labels => labels.Format("{0}%"))
            .Line(lines => lines.Visible(false))
        )
            )
        </div>
        break;
    case 2:
        <p>Another type</p>
        break;
}

I hope this is helpful.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Chart
Asked by
Joseph Farrar
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or