Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

help with remote datasource

1 Answer 151 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
gusa
Top achievements
Rank 1
gusa asked on 24 Sep 2012, 01:12 PM
Please 

i am new to the Kendo UI. I am trying to follow a couple of the example and have tried to combine 2 of them: Chart (pie) and mobile (button).

The problem is that when i try to use a remote datasource the chart is empty. I works with a local source.  The json file has been validated.

the code and json data follow.

Thank you,
Gus



\\\\\code

<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.all.min.js"></script>
    
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet" />
    <link href="../../../styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
   


<style scoped>
.button {
    margin: 0 0 0 .5em;
    text-align: center;
}
.button:first-of-type {
    margin: 0 0 0 1em;
}
.home {
    background: url(../../content/mobile/shared/sports-home.jpg) no-repeat center center;
}
.facility {
    background: url(../../content/mobile/shared/sports-facility.jpg) no-repeat center center;
}
.sports {
    background: url(../../content/mobile/shared/sports.jpg) no-repeat center center;
}
#button-home .head,
#facility .head,
#sports .head {
display: block;
margin: 1em;
height: 120px;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
}
.km-ios .head,
.km-blackberry .head {
    -webkit-border-radius: 10px;
    border-radius: 10px;
}


 .chart-wrapper {
                margin: 0 0 0 20px;
                width: 466px;
                height: 434px;
                background: url("../../content/shared/styles/chart-wrapper-small.png") transparent no-repeat 0 0;
                }
                
                .chart-wrapper .k-chart {
                    height: 280px;
                    padding: 37px;
                    width: 390px;
                }


</style>




</head>








<body>
    <a href="../index.html">Back</a>
    <div data-role="view" id="button-home" data-title="Sports Academy">
    <div class="home head">&nbsp;</div>   
    <a class="button" data-role="button" href="#button-home" style="background-color: #f60">Home</a><a class="button" data-role="button" href="#facility">Facility</a><a class="button" data-role="button" href="#sports">Sports</a>
    <ul data-role="listview" data-style="inset">
        <li>
            <p>Our Sports Academy provides a venue for outdoor and indoor sports and activities for children and adults of all ages.</p>
        </li>
    </ul>

<div id="example" class="k-content">
            <div class="chart-wrapper">
                <div id="chart"></div>
            </div>
            <script>

                var myDataSource = new kendo.data.DataSource({
transport: {
read: {
// the remote service url
url: "http://174.129.38.117/ui/example/mobile/button/sales.json",


// JSONP is required for cross-domain AJAX
dataType: "json",

}
},

});


                function createChart() {
                    $("#chart").kendoChart({
                        theme: $(document).data("kendoSkin") || "default",
                        title: {
                            text: "Sales 2008"
                        },
                        legend: {
                            position: "bottom"
                        },

                        dataSource: myDataSource,

                        series: [{
                            type: "pie",
                            field: "percentage",
                            categoryField: "category",
                            explodeField: "explode"

                        }],

                        tooltip: {
                            visible: true,
                            template: "${ category } - ${ value }%"
                        }
                    });
                }


                $(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();
                        });
                    }, 200);
                });
            </script>
        </div>


</div>


<div data-role="view" id="facility" data-title="Facility">
    <div class="facility head">&nbsp;</div>
    <a class="button" data-role="button" href="#button-home">Home</a><a class="button" data-role="button" href="#facility" style="background-color: #f60">Facility</a><a class="button" data-role="button" href="#sports">Sports</a>
    <ul data-role="listview" data-style="inset">
        <li>
            <p>The facility has two indoor basketball fields, olympic size swimming pool, outdoor soccer field, baseball field, golf club and more.</p>
        </li>
    </ul>
    
     
</div>


<div data-role="view" id="sports" data-title="Sports">
    <div class="sports head">&nbsp;</div>
    <a class="button" data-role="button" href="#button-home">Home</a><a class="button" data-role="button" href="#facility">Facility</a><a class="button" data-role="button" href="#sports" style="background-color: #f60">Sports</a>
    <ul data-role="listview" data-style="inset">
        <li>American Football</li>
        <li>Baseball</li>
        <li>Basketball</li>
        <li>Football</li>
<li>Dallas</li>
        <li>Golf</li>
        <li>Swimming</li>
    </ul>
</div>




<script>
    $("#home-link").kendoMobileButton();
</script>




    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
</body>
</html>



\\\json

{
    "data": [
        {
            "category": "2005",
            "value": "67"
        },
        {
            "category": "2006",
            "value": "69"
        },
        {
            "category": "2007",
            "value": "75"
        },
        {
            "category": "2008",
            "value": "74"
        },
        {
            "category": "2009",
            "value": "78"
        }
    ]
}

1 Answer, 1 is accepted

Sort by
0
Javi
Top achievements
Rank 1
answered on 10 Jan 2014, 01:49 PM
I have the same problem, is there any solution?
Tags
Data Source
Asked by
gusa
Top achievements
Rank 1
Answers by
Javi
Top achievements
Rank 1
Share this question
or