KendoChart Data Binding

5 posts, 0 answers
  1. Nirav
    Nirav avatar
    16 posts
    Member since:
    Jul 2014

    Posted 26 Aug 2014 Link to this post

    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.

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 27 Aug 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Nirav
    Nirav avatar
    16 posts
    Member since:
    Jul 2014

    Posted 27 Aug 2014 in reply to Iliana Nikolova Link to this post

    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.
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 27 Aug 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Nirav
    Nirav avatar
    16 posts
    Member since:
    Jul 2014

    Posted 27 Aug 2014 in reply to Iliana Nikolova Link to this post

    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. 

Back to Top