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

chart display based on dropdown selected item

1 Answer 160 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Rajendra
Top achievements
Rank 1
Rajendra asked on 11 Nov 2014, 10:21 AM
Based on the selection of dropdownlist item, I would need to query the database with the selected item and display the results as chart.
Could anyone please point me to the example url

1 Answer, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 13 Nov 2014, 08:22 AM
Hello,

You should first take a look at the Binding to remote data demo.

A simple way to do change the query is to trigger a read on the data source of the chart:
@(Html.Kendo().Chart<MyModel>()
    .Name("chart")
    .DataSource(ds => ds.Read(read => read.Action("Read", "Home")))
    .Series(series => {
        series.Column(model => model.Value).Name("Series 1");
    })
    .CategoryAxis(axis => axis
        .Categories(model => model.Year)
    )


<button id="filter">Filter</button>
<script>
    $("#filter").click(function () {
        var chart = $("#chart").getKendoChart();
        chart.dataSource.read({
            myData: "foo"
        });
    });
</script>


Here we're hitting the controller with additional data that can contain for example our filter criteria.
It's accessible as regular parameters on the action:
[HttpPost]
public ActionResult _SpainElectricityProduction(string myData)
{
      return Json(...);
}


The chart will be updated with the new data as returned from the action.
Notice that we can't change series definitions or chart options directly.
Such updates concerns only the data source and the series data.

I hope this helps.

Regards,
T. Tsonev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Chart
Asked by
Rajendra
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Share this question
or