Hello,
I have created an application using kendo mobile. I want to use a bullet chart in my application. But when I try to create a chart, it gives me an error "Uncaught TypeError: Object [object Object] has no method 'kendoChart'". I do not understand why I am getting this error.
Please help me solve it.
Thanks,
Nirav
I have created an application using kendo mobile. I want to use a bullet chart in my application. But when I try to create a chart, it gives me an error "Uncaught TypeError: Object [object Object] has no method 'kendoChart'". I do not understand why I am getting this error.
Please help me solve it.
Thanks,
Nirav
3 Answers, 1 is accepted
0
Hello Nirav,
This error occurs if jQuery is included more than once in the page. For more detailed information as well as a solution please take a look at this documentation section.
Regards,
Iliana Nikolova
Telerik
This error occurs if jQuery is included more than once in the page. For more detailed information as well as a solution please take a look at this documentation section.
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 26 Aug 2014, 07:43 PM
Hello,
I am trying to bind my wcf service's result 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>
I am trying to bind my wcf service's result 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>
0
Hello Nirav,
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
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!