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

Chart rendering

0 Answers 87 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Greg
Top achievements
Rank 1
Greg asked on 08 Jun 2012, 09:33 PM
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>

No answers yet. Maybe you can help?

Tags
Charts
Asked by
Greg
Top achievements
Rank 1
Share this question
or