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

connecting chart datasource to mvc ajax call from button

1 Answer 304 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Entilzha
Top achievements
Rank 2
Entilzha asked on 08 Jun 2012, 06:49 PM
I am trying to figure out how to wire up the json values that are being returned from an mvc submit requested by a button to the datasource of a line plot. I have verified the data is being returned as a json array of objects[] with the scema {string seriesname, double[] xvalues, double[] yvalues}.  However, my call to createPlot(..) is only drawing the basic line plot WITHOUT my data.  Firebug is not reporting any errors and I confirmed the "plotdata" returned in the OnSuccess(..) method contains my json data.

Maybe I'm just being stupid or showing that I am inexperienced but I am hoping someone can point me in the right direction.

Thank you!
Marcus

    <script type="text/javascript">
        function OnSuccess(plotdata) {
            var localDataSource = new kendo.data.DataSource({
                data: plotdata,
                transport: {
                        read: {
                            url: ('@Url.Action("PlotData")'),
                            dataType: "json"
                        }
                    }
                });
            createPlot(localDataSource);
        }
        function createPlot(plotdata) {
            $("#myplot").kendoChart({
                theme: $(document).data("kendoSkin") || "default",
                seriesDefaults: {
                    type: "line"
                },
                dataSource: plotdata,
                series: [{
                    field: "yvalues"
                }],
                categoryAxis: {
                    field: "xvalues"
                },
            });
        }
    </script>

1 Answer, 1 is accepted

Sort by
0
Entilzha
Top achievements
Rank 2
answered on 09 Jun 2012, 01:14 AM
SUCCESS!  In the couple of hours since I posted this I have discovered that setting my values through a "DataSource" object is not looking like the right way to go when you are responding to an MVC event.  I am successfully receiving the data after a submit in my "OnSuccess" handler which means I already have the data and do not need to handle the "Change" event.  I discovered I am able to set the values on my chart more directly.  I found this link to be very informative with a great jsfiddle link.

http://www.kendoui.com/forums/ui/chart/json-format-for-multiple-series.aspx

The main thing I am doing differently now is to harvest my own "series" data.  Here is my updated code if anyone wants to know what I did differently.  I should add I went this route as an exercise in learning how better to use MVC but I think the biggest lesson I learned is to NOT use MVC to do the heavy lifting.  My next exercise will be to add the data using a REST setting on the DataSource instead.  I welcome any and all feedback on what I did here.

    <script type="text/javascript">
        function OnSuccess(plotdata) {
            createPlot(plotdata);
        }
        function createPlot(plotdata) {
            $("#myplot").kendoChart({
                theme: $(document).data("kendoSkin") || "default",
                title: {
                    text: "MVC-Led-Plot"
                },
                legend: {
                    position: "bottom"
                },
                seriesDefaults: {
                    labels: {
                        visible: false
                    },
                    type: "line"
                },
                categoryAxis: {
                    categories: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40]
                }
            });

            var series = [];
            var view = plotdata.Data;
            for (var groupIx = 0; groupIx < view.length; groupIx++) {
                var group = view[groupIx];
                series.push({
                    data: group.yvalues,
                    name: group.name
                });
            }

            var chart = $("#myplot").data('kendoChart');
            chart.options.series = series;
            chart.refresh();
        }
    </script>

Tags
Data Source
Asked by
Entilzha
Top achievements
Rank 2
Answers by
Entilzha
Top achievements
Rank 2
Share this question
or