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"
},
]
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
0
Hello John,
When binding Kendo UI Chart to a dataSource in the series configuration you should point series.field (not data:"value"). I.e.:
Regards,
Iliana Nikolova
Telerik
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
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
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
series:
[{
field:"value",
name: "Name"
}],
please check and help me
0
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
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!