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

Kendochart error

3 Answers 162 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Nirav
Top achievements
Rank 1
Nirav asked on 25 Aug 2014, 07:25 PM
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

3 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 26 Aug 2014, 07:52 AM
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
 
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
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>























0
Iliana Dyankova
Telerik team
answered on 27 Aug 2014, 03:06 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
General Discussions
Asked by
Nirav
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Nirav
Top achievements
Rank 1
Share this question
or