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

Change datasource

5 Answers 394 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Ronald
Top achievements
Rank 1
Ronald asked on 26 Mar 2013, 09:09 AM
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();
        }

5 Answers, 1 is accepted

Sort by
0
Hristo Germanov
Telerik team
answered on 26 Mar 2013, 10:38 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ronald
Top achievements
Rank 1
answered on 26 Mar 2013, 11:03 AM
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.
0
Hristo Germanov
Telerik team
answered on 26 Mar 2013, 12:23 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ronald
Top achievements
Rank 1
answered on 27 Mar 2013, 04:38 AM
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
0
Hristo Germanov
Telerik team
answered on 29 Mar 2013, 07:29 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Charts
Asked by
Ronald
Top achievements
Rank 1
Answers by
Hristo Germanov
Telerik team
Ronald
Top achievements
Rank 1
Share this question
or