Change datasource

[Ronald]

Hi,

I've created a chart in ASP.NET MVC using the following code:

@(Html.Kendo().Chart(Model)
    .Name("Regions")
    .Title("Regions")
        .DataSource(ds =>
            {
                ds.Read(read => read.Action("GetClientRecordsCountByRegion", "Home"));
                ds.Sort(sort => sort.Add(model => model.Region).Ascending());
            }
        )
    .Series(series =>
    {
        series.Pie("TrademarkCount", "Region")
            .Labels(lbl => lbl.Visible(true).Template("#= category #: #= value #")
                .Align(ChartPieLabelsAlign.Circle)
                .Position(ChartPieLabelsPosition.OutsideEnd));
    })
)

On a button click, I would like to refresh the chart with new data by either calling another Action or passing parameters into the current action.  How do I do that?

I tried setDataSource and then redraw as shown below but its not working.  Please help. Thanks!

function refreshsource()
        {
            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        type: "GET",
                        url: "/Home/GetClientRecordsCountByRegionNew",
                        dataType: "json"
                    }
                }
            });

            var chart = $("#Regions").data("kendoChart");
            chart.setDataSource(dataSource);
            chart.redraw();
        }

[Hristo Germanov]

Hello Ronald,

In your case I think that you should use just this:

var chart = $("#Regions").data("kendoChart");
chart.dataSource.read({ test: "test" });

After read() fetch() or query() you should not call refresh() or repaint(). The dataSource will triggered change and then the chart will be repainted.

I hope that helps you.

All the best,
Hristo Germanov
the Telerik team

[Ronald]

Thanks Hristo.

I tried putting chart.dataSource.read({ test: "test" }); and also just chart.dataSource.read() but it didn't work.  It repaints the chart but it didn't call the method specified in the URL of the datasource.  However, if I put something like chart.dataSource.data(datSource.read()) , it calls the method but nothing happens to the chart.

What am I missing?

Thanks.

[Hristo Germanov]

Hi Ronald,

I am not sure where can be the problem. I have attached a test project that shows you how to post parameter to the server.

Kind regards,
Hristo Germanov
the Telerik team

[Ronald]

Hi Hristo,

Thanks for the sample project.  However, my problem is not with the initial rendering of the graph.  I'm able to do that similar to how its done in your sample project.  What I want to do is to refresh the graph with new data on a button click.

Ultimately, what I want to do is to to have two graphs in which the second graph will be refreshed with new data depending on the series I click from the first graph.  So, when I click a series in the first graph, I want to call an Action which will populate a dataSource which will in turn be assigned to the second graph.

Can you point me in the right direction or if you have a sample project that will be great!

Thanks for your assistance on this.

Regards,
Ronald

[Hristo Germanov]

Hi Ronald,

In your case you need to add button with a click handler. Then you need to move this peace of code in the that handler. For example:

<button class="t-button" onclick="rebind()">rebind</button>
<script type="text/javascript">
    function rebind() {
        $("#chart").data("kendoChart").dataSource.read({ test: "test" });
    }
</script>

In the second case you need to
1) Hook up to the series click event.
2) Get the series name and pass it to the action that will return different result depend on that name. You can get the series name from the event argument. For more information about this event you can find in this api documentation.

Regards,
Hristo Germanov
the Telerik team