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

how to get data from json file

4 Answers 76 Views
Charts
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 08 Jan 2014, 12:21 PM
I am struggling  to get json value,it's cannot display values
 here my coding 
display.html
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <link href="styles/kendo.dataviz.css" rel="stylesheet" />
    <link href="styles/kendo.dataviz.default.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">
    <div class="chart-wrapper">
        <div id="chart"></div>
    </div>
    <script type="text/javascript">
        var queryString = new Array();
        $(function () {
            if (queryString.length == 0) {
                if (window.location.search.split('?').length > 1) {
                    var params = window.location.search.split('?')[1].split('&');
                    for (var i = 0; i < params.length; i++) {
                        var key = params[i].split('=')[0];
                        var value = decodeURIComponent(params[i].split('=')[1]);
                        queryString[key] = value;
                    }
                }
            }
            if (queryString["name"] != null && queryString["category"] != null && queryString["value"] != null) {
               var name=queryString["name"];
  var category=queryString["category"];
  var value=queryString["value"];
  alert(name+category+value);
            }
        });

        function createChart() {
            $("#chart").kendoChart({
                dataSource: {
                    transport: {
                        read: {
                            url: "data.json",
                            dataType: "json"
                        }
                    },
                    sort: {
                        field: "date",
                        dir: "asc"
                    }
                },
                title: {
                    text: "Spain electricity production (GWh)"
                },
                legend: {
                    position: "top"
                },
                seriesDefaults: {
                    type: "column"
                },
                series:
                [{
                    data:"value",
                    name: "Name"
                }],
                categoryAxis: {
                    field: "date",
                    labels: {
                        rotation: -90
                    }
                },
                valueAxis: {
                    labels: {
                        format: "{0:N0}"
                    },
                    majorUnit: 5000
                },
                tooltip: {
                    visible: true,
                    format: "{0:N0}"
                },
              
            });
        }

       
        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>
    <div class="demo-section">
        
        <div class="console"></div>
    </div>
    <style scoped>
        .demo-section {
            width: 700px;
        }
    </style>
</div>
</body>
</html>


//data.json

[
        {
                "month": "jan",
                "date": 1,
                "value": 3000,
                "name": "p1"
        },
        {
                "month": "jan",
                "date": 3,
                "value": 6000,
                "name": "p1"
        },
        {
                "month": "jan",
                "date": 6,
                "value": 8000,
                "name": "p1"
        },
        {
                "month": "jan",
                "date": 1,
                "value": 3000,
                "name": "p2"
        },
       {
                "month": "jan",
                "date": 5,
                "value": 3030,
                "name": "p2"
        },
       {
                "month": "jan",
                "date": 8,
                "value": 4000,
                "name": "p2"
        },
        {
                "month": "jan",
                "date": 10,
                "value": 3000,
                "name": "p2"
        },
       {
                "month": "jan",
                "date": 10,
                "value": 3400,
                "name": "p1"
        },
        {
                "month": "jan",
                "date": 11,
                "value": 7000,
                "name": "p1"
        },
]

4 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 09 Jan 2014, 04:43 PM
Hello John,

When binding Kendo UI Chart to a dataSource in the series configuration you should point series.field (not data:"value"). I.e.: 
$("#chart").kendoChart({
  //....
  series: [{
      field:"value",
      name: "Name"
  }]
});

Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John
Top achievements
Rank 1
answered on 09 Jan 2014, 04:57 PM
Thank u for your reply ,I have one doubt so can I contact tomorrow morning, can u give ur mail id
0
John
Top achievements
Rank 1
answered on 10 Jan 2014, 06:47 AM
i try your idea but it's cannot working

 series:
                [{
                    field:"value",
                    name: "Name"
                }],
please check and help me
0
Iliana Nikolova
Telerik team
answered on 10 Jan 2014, 07:43 AM
Hello John,

I tested the suggested solution and everything is working as expected on my side. For your convenience I attached a sample HTML page.

Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Charts
Asked by
John
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
John
Top achievements
Rank 1
Share this question
or