Trying to display data in chart coming from WCF service?

1 posts, 1 answers
  1. Answer
    Vaughn Myers
    Vaughn Myers avatar
    5 posts
    Member since:
    Apr 2006

    Posted 10 Jul 2013 Link to this post

    I'm using the same code as the kendoui demo, but with a WCF service instead of JSON. But the data is not being displayed.

    The method call is returning exactly the same data as [spain-electricity.json] used in your demo. In my case it's http://localhost:4916/Service1.svc/getList and it displays exactly the same thing in the browser.

    My IService1 interface looks like this:
            [OperationContract]
            [WebGet(ResponseFormat = WebMessageFormat.Json)]
            IList<myStruct> getList();

    The method looks like this:
            public IList<myStruct> getList()
            {
                IList<myStruct> StructSpain = new List<myStruct>();
                StructSpain.Add(new myStruct
                {
                    country = "Spain",
                    year = "2008",
                    unit = "GWh",
                    solar = 2578,
                    hydro = 26112,
                    wind = 32203,
                    nuclear = 58973
                });
              ... 
                return StructSpain;
            }

    My html looks like this: 
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link href="styles/kendo.common.min.css" rel="stylesheet" />
        <link href="styles/kendo.default.min.css" rel="stylesheet" />
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.all.min.js"></script>
    </head>
    <body>
        <div id="example" class="k-content absConf">
        <div class="chart-wrapper" style="margin: auto;">
            <div id="chart"></div>
        </div>
        <script>
            function createChart() {
                $("#chart").kendoChart({
                    dataSource: {
                        transport: {
                            read: {
    type:"post",
                                url: "http://localhost:4916/Service1.svc/getList",
                                dataType: "json"
                            }
                        },
                        sort: {
                            field: "year",
                            dir: "asc"
                        }
                    },
                    title: {
                        text: "Spain electricity production (GWh)"
                    },
                    legend: {
                        position: "top"
                    },
                    seriesDefaults: {
                        type: "area"
                    },
                    series: [{
                            field: "nuclear",
                            name: "Nuclear"
                        }, {
                            field: "hydro",
                            name: "Hydro"
                        }, {
                            field: "wind",
                            name: "Wind"
                    }],
                    categoryAxis: {
                        field: "year",
                        labels: {
                            rotation: -90
                        }
                    },
                    valueAxis: {
                        labels: {
                            format: "N0"
                        },
                        majorUnit: 10000
                    },
                    tooltip: {
                        visible: true,
                        format: "N0"
                    }
                });
            }

            $(document).ready(function() {
                setTimeout(function() {
                    createChart();

                    // Initialize the chart with a delay to make sure
                    // the initial animation is visible
                }, 400);

                $(document).bind("kendo:skinChange", function(e) {
                    createChart();
                });
            });
        </script>
    </div>
    </body>
    </html>
Back to Top