call json service group data and bind to graph

[Shane P]

I am having some troubles binding my chart. I am trying to create a datasource that is bound to my mvc3 controller

Basically I am trying to dynamically bind the series. As I dont know what the values are going to be.

The controller is called and the json is returned however nothing is shown in the graph.
What am I doing wrong? I am not getting any javascript errors.
 

  <script>

        $(document).ready(function () {

            setTimeout(function () {

                createChart();

            }, 400);

            $(document).bind("kendo:skinChange", function (e) {

                createChart();

            });

        });

 

        function createChart() {

            var dataSource = new kendo.data.DataSource({

                transport: {

                    read: {

                        url: "/MyService/GetGraph",

                        dataType: "json"

                        // additional parameters sent to the remote service

//                        data: {

//                            q: "html5"

//                        }

                    },

                    group: {

                        field: "TransactionTypeName",

                        dir: "asc"

                    }

                }

            });

            dataSource.read();

 

            $("#chart").kendoChart({

                theme: $(document).data("kendoSkin") || "default",

                dataSource: { data: dataSource },

                title: {

                    text: "Transaction Details"

                },

                legend: {

                    position: "bottom"

                },

                seriesDefaults: {

                    type: "column"

                },

                series:

                        [{

                            field: "TransactionAmount",

                            name: "Transaction Name"

                        }],

                categoryAxis: {

                    field: "MonthString",

                    labels: {

                        rotation: -90

                    }

                },

                valueAxis: {

                    labels: {

                        format: "{0:N0}"

                    }

                },

                tooltip: {

                    visible: true,

                    format: "{0:N0}"

                }

            });

        }   

      

    </script>

[Shane P]

I thought I would show how my json is returned like as that might make things a little clearer.

Basically I want to in the case have 2 series (TransactionTypeName) Transaction 1 & Transaction 2 and render the graph with the 2 values been displayed in the same month.

[{"TransactionTypeName":"Transaction 1","MonthString":"September","TransactionAmount":1327.0000,"Discount":146.0000},{"TransactionTypeName":"Transaction 1","MonthString":"October","TransactionAmount":450.4000,"Discount":null},{"TransactionTypeName":"Transaction 1","MonthString":"November","TransactionAmount":198.5200,"Discount":43.0000},{"TransactionTypeName":"Transaction 1","MonthString":"December","TransactionAmount":9.2000,"Discount":1.0000},{"TransactionTypeName":"Transaction 2","MonthString":"December","TransactionAmount":2.0000,"Discount":1.0000}]

Thank you

[Hristo Germanov]

Hi,

Thank you for contacting us.

Unfortunately the chart does not support grouped data. We will fix this as soon as we can. Please excuse us for the inconvenience.

I have updated you telerik points.

Greetings,
Hristo Germanov
the Telerik team

[Shane P]

Thanks for your reply.

Ok a slightly different approach, If I create a datasource and bind the graph to the datasource I can then bind the datasource to a webservice that returns json.

I have created something in jsfiddle that looks like the attachment.

I have 2 values for each month each with their own title "Sales Made" & "Refunds". For testing I have Jan,Feb & March

So far I have been able to render out the 6 columns each with the correct values however they are all grouped in Jan & Feb.

Can anyone see what I am doing wrong? I am nearly there just can't get the last little piece to work.


Any help would be appreciated! 

[Naveen]

var data = {"reportData":[]};
 var statisticsDataSource = new kendo.data.DataSource({
        data: data,
        schema: {
            data: "reportData"
        }
    });
 $(document).ready(function() {
        loadInfo();
        //createGrid1(); - uses statisticsDataSource
        //createGrid2(); - uses tasksDataSource
        autorefresh();
    });
    function autorefresh() {
        loadInfo();
        statisticsDataSource.read();
          setTimeout(function() {
            autorefresh();
        }, 30000);
    }
    function loadInfo() {
        $.getJSON("http://localhost/JsonWebservice/Service1.asmx/GetOrderSummary", function(json) {
            $.ajaxSetup({ cache: false });
            data.statistics = json.statistics;
               });
    }

$(document).ready(function()  {

    $("#Div3").kendoChart({
        theme: "metro",
        dataSource: {
        data: reportData
            //filter: { field: "type", operator: "eq", value: "names" }
        },
        title: {
            text: "Order Summary"
        },
        legend: {
            visible: true
        },
        seriesDefaults: {
            type: "column",
            stack: true
        },
        series: [
        {
            field: "UserCode",
            name: "UserCode",
            color: "#5084EA"
        },
        {
            field: "COUNT",
            name: "COUNT",
            color: "red"
}],
            tooltip: {
                visible: true
            },
            valueAxis: {
                max: 100,
                min: 0,
                labels: {
                    visible: true,
                    format: "{0:N0}"
                }
            },
            categoryAxis: {
                field: "UserCode",
                labels: {
                    visible: true
                }
            }
        });
    }
Iam also facing  same issue.Iam retrieving json data from web service.but chart is not coming.can anyone help me on this.