I am trying to bind the result of my wcf service to a bullet chart. This is my code. Can anyone please tell me, what am I doing wrong here.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/bullet-charts/index">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<table class="history">
<tr>
<td class="item">Chart1</td>
<td class="chart"><div id="chart-mmHg" style="width: 485px"></div></td>
</tr>
</table>
</div>
<script>
function createChart() {
$("#chart-mmHg").kendoChart({
legend: {
visible: false
},
dataSource: {
transport: {
read: {
url: "http://localhost:29067/Service1.svc/Mymethodname",
dataType: "json"
}
}
},
series: [{
type: "bullet",
currentField: "current",
targetField: "target",
target: {
color: "#aaaaaa"
}
}],
chartArea: {
margin: {
left: 0
}
},
categoryAxis: {
majorGridLines: {
visible: false
},
majorTicks: {
visible: false
}
},
valueAxis: [{
plotBands: [{
from: 0, to: 17500, color: "#ccc1df", opacity: .6
}, {
from: 17500, to: 18000, color: "#1rf036", opacity: .3
}],
majorGridLines: {
visible: false
},
min: 0,
max: 18000,
minorTicks: {
visible: true
}
}],
tooltip: {
visible: true,
template: "Maximum: #= value.target # <br /> Average: #= value.current #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
<style scoped>
.history {
border-collapse: collapse;
width: 60%;
margin: 0 auto;
}
.history .k-chart {
height: 65px;
}
.history td.item {
line-height: 65px;
width: 20px;
text-align: right;
padding-bottom: 22px;
}
</style>
</div>
</body>
</html>
Thanks.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/bullet-charts/index">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<table class="history">
<tr>
<td class="item">Chart1</td>
<td class="chart"><div id="chart-mmHg" style="width: 485px"></div></td>
</tr>
</table>
</div>
<script>
function createChart() {
$("#chart-mmHg").kendoChart({
legend: {
visible: false
},
dataSource: {
transport: {
read: {
url: "http://localhost:29067/Service1.svc/Mymethodname",
dataType: "json"
}
}
},
series: [{
type: "bullet",
currentField: "current",
targetField: "target",
target: {
color: "#aaaaaa"
}
}],
chartArea: {
margin: {
left: 0
}
},
categoryAxis: {
majorGridLines: {
visible: false
},
majorTicks: {
visible: false
}
},
valueAxis: [{
plotBands: [{
from: 0, to: 17500, color: "#ccc1df", opacity: .6
}, {
from: 17500, to: 18000, color: "#1rf036", opacity: .3
}],
majorGridLines: {
visible: false
},
min: 0,
max: 18000,
minorTicks: {
visible: true
}
}],
tooltip: {
visible: true,
template: "Maximum: #= value.target # <br /> Average: #= value.current #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
<style scoped>
.history {
border-collapse: collapse;
width: 60%;
margin: 0 auto;
}
.history .k-chart {
height: 65px;
}
.history td.item {
line-height: 65px;
width: 20px;
text-align: right;
padding-bottom: 22px;
}
</style>
</div>
</body>
</html>
Thanks.
4 Answers, 1 is accepted
0
Hi Nirav,
I have just posted a reply in your other thread, however here is my answer too:
The provided chart configuration looks OK and I am not quite sure what causes the actual issue in your application is. Could you please make sure the data is returned by the service?
Regards,
Iliana Nikolova
Telerik
I have just posted a reply in your other thread, however here is my answer too:
The provided chart configuration looks OK and I am not quite sure what causes the actual issue in your application is. Could you please make sure the data is returned by the service?
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
Nirav
Top achievements
Rank 1
Rank 1
answered on 27 Aug 2014, 03:25 PM
Hi Iliana,
The service is providing the exact result. I have checked it a few times. However, I cannot bind that result to a chart.
Thanks.
The service is providing the exact result. I have checked it a few times. However, I cannot bind that result to a chart.
Thanks.
0
Hi again Nirav,
I am not quite sure what causes the issue. Is it possible to provide an isolated runnable example which demonstrates the problem and which I can test locally - this way I would be able to check what exactly is going wrong and provide concrete recommendations? Thank you in advance for your time and cooperation.
Regards,
Iliana Nikolova
Telerik
I am not quite sure what causes the issue. Is it possible to provide an isolated runnable example which demonstrates the problem and which I can test locally - this way I would be able to check what exactly is going wrong and provide concrete recommendations? Thank you in advance for your time and cooperation.
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
Nirav
Top achievements
Rank 1
Rank 1
answered on 27 Aug 2014, 06:08 PM
Hi Iliana,
Thanks for the time. But I was able to solve it. I just needed to add a json extension for the mime mapping.
Thanks for the time. But I was able to solve it. I just needed to add a json extension for the mime mapping.