Chart rendering

1 posts, 0 answers
  1. Greg
    Greg avatar
    7 posts
    Member since:
    Apr 2012

    Posted 08 Jun 2012 Link to this post

    I'm a bit stumped as to what I may have missed in my code. I know that data is being returned from the web service, there are no errors setting the dataSource and the dataBound event fires, and yet I see no columns on the chart. If I hard code series data then it renders OK. Can anyone spot anything that's incorrect?

    This is the Json data being returned ...

    {
        "d": [
            {
                "location": " Garden (AUS)",
                "amount": "4661"
            },
            {
                "location": "Suites ",
                "amount": "1768"
            },
            {
                "location": "Marriot",
                "amount": "2292"
            },
            {
                "location": "Santa Rosa",
                "amount": "1616"
            },
            {
                "location": "W",
                "amount": "275"
            }
        ]
    }

    <script type="text/javascript">
     
                    $(document).ready(function () {
                        setTimeout(function () {
                            // Initialize the chart with a delay to make sure
                            // the initial animation is visible
                            createChart();
     
                            $("#example").bind("kendo:skinChange"function (e) {
                                createChart();
                            });
                        }, 400);
     
                    });
     
                    function createChart() {
                        $("#chart").kendoChart({
                            theme: $(document).data("kendoSkin") || "black",
                            dataSource: {
                                schema: {
                                    data: "d",
                                    model: {
                                        fields: {
                                            location: { type: "string" },
                                            amount: { type: "number" }
     
                                        }
                                    }
                                },
     
                                transport: {
                                    read: {
                                        type: "POST",
                                        url: "../WebServices/DashboardService.asmx/YTDRevenueByLocation?format=json",
                                        contentType: "application/json; charset=utf-8",
                                        data: {},
                                        dataType: "json"
                                    }
                                    
                                },
                                error: function (e) {
                                    alert("Error fetching data from server");
                                },
                                change: function (e) {
                                    //alert(data);
                                },
                                requestStart: function (e) {
                                    // alert("Request Start");
                                }
                            },
                            title: {
                                text: "YTD Revenue By Location"
                            },
                            legend: {
                                position: "bottom"
                            },
                            seriesDefaults: {
                                type: "column"
                            },
                            series: [
    					{ name: "Totals", field: "amount" }
    					],
                            categoryAxis: {
                                field: "location",
                                labels: {
                                    rotation: -90
                                }
                            },
                            valueAxis: {
                                labels: {
                                    format: "${0}"
                                },
                                majorUnit: 2000
                            },
                            tooltip: {
                                visible: true,
                                format: "${0}"
                            },
                            dataBound: function onDataBound(e) {
                                alert("Data is bound");
                            }
     
                        });
                    }
     
     
     
     
        </script>

Back to Top