Adding a chart dynamically

2 posts, 0 answers
  1. Joseph Farrar
    Joseph Farrar avatar
    2 posts
    Member since:
    Jun 2010

    Posted 08 Nov Link to this post

    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;

  2. Stefan
    Admin
    Stefan avatar
    1259 posts

    Posted 10 Nov Link to this post

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