Bullet Graph Datasource

5 posts, 1 answers
  1. Alexander
    Alexander avatar
    11 posts
    Member since:
    Feb 2013

    Posted 28 Mar 2013 Link to this post

    Hi I'm trying to set my bulletgraph up to use a remote data source however I'm not currently seeing anything on the graph. The JSON output is this:

    {"backlogtotalcount":1970}

    I get that by running this ajax function in firebug:

    $.ajax({
    type: 'GET',
    url: $('#operationalBacklogGaugeValue').data('url'),
    success: function (data) {
    $('#operationalBacklogGaugeValue').val(data);
    }
    });

    Finally my bullet graph chart is here:

    function operationalEfficiencyChartLoad() {
        setTimeout(function () {
            createOperationalEfficiencyChart();
            $('#operationalEfficiencyChart').bind("kendo:skinChange", function (e) {
                createOperationalEfficiencyChart();
            });
        }, 200);
    }

    function createOperationalEfficiencyChart() {
        $("#operationalEfficiencyChart").kendoChart({
            legend: {
                visible: false
            },
            dataSource: {
                transport: {
                    read: {
                        url: $('#operationalEfficiencyChart').data('url'),
                        dataType: "json"
                    }
                }
            },
            series: [{
                type: "bullet",
                currentField: "backlogtotalcount",
                color: '#838281',
                target: {
                    line: {
                        width: 0
                     }
                }
            }],
            chartArea: {
                height: 75,
                width: 805,
                margin: {
                    left: 0
                }
            },
            categoryAxis: {
                majorGridLines: {
                    visible: false
                },
                majorTicks: {
                    visible: false
                }
            },
            valueAxis: [{
                plotBands: [{
                    from: 0, to: 1960, color: "#8FD400", opacity: .4
                }, {
                    from: 1960, to: 2300, color: "#FFD100", opacity: .5
                }, {
                    from: 2300, to: 3000, color: "#FF5B35", opacity: .6
                }, {
                    from: 1956, to: 1956, color: "#000000", opacity: 1
                }],
                majorGridLines: {
                    visible: false
                },
                min: 0,
                max: 3000,
                minorTicks: {
                    visible: true
                }
            }],
            tooltip: {
                visible: true,
                format: "#.##"
            }
        });
    }

    I'm trying to setup a fiddle here http://jsfiddle.net/Alex_Hagerman/bsGTk/16/, so there may be a live demo if that would help but it currently is not co-operating.

    If you can tell me what is wrong with this remote data source setup I would really appreciate it.

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 29 Mar 2013 Link to this post

    Hello Alexander,

    I believe the issue is caused by the lack of targetField for the bullet Chart - by design such type of Chart expects a target value / field (as shown in this online demo). Could you please check this suggestion and let me know if you still observe any problems? Thank you in advance for your cooperation.

    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Alexander
    Alexander avatar
    11 posts
    Member since:
    Feb 2013

    Posted 01 Apr 2013 Link to this post

    I will be able to check it tomorrow and let you know. Thanks.
  5. Alexander
    Alexander avatar
    11 posts
    Member since:
    Feb 2013

    Posted 01 May 2013 Link to this post

    Sorry for the late reply,

    JSON is formatted like this:

    {"backlogtotalcount":1491,"targetfield":1956}

    And my graph is using the following parameters:

                dataSource: {
                    transport: {
                        read: {
                            url: $('#backlogGaugeTotal').data('url'),
                            dataType: "json"
                        }
                    }
                },
                series: [{
                    type: "bullet",
                    currentField: "backlogtotalcount",
                    targetField: "targetfield",
                    target: {
                        color: "#FF0000"
                    },
                    gap: 1
                }],

    And nothing maps, even thought the dataSource call is successfully receiving the above JSON back. I also tried to a traditional AJAX and passing data.backlogtotalcount to the graph without any success. Is there specific formatting or something needed for the bullet graph?
  6. Answer
    Alexander
    Alexander avatar
    11 posts
    Member since:
    Feb 2013

    Posted 01 May 2013 Link to this post

    I was able to get this to work by formatting the JSON Result:

    {"backlog":[{"backlogtotalcount":2970,"targetfield":1956}]}

    And then using the dataSource with the schema option:

            dataSource: {
                transport: {
                    read: {
                        url: $('#operationalEfficiencyChart').data('url'),
                        dataType: "json"
                    }
                },
                schema: {
                    data: "backlog"
                },
            },
            series: [{
                type: "bullet",
                currentField: "backlogtotalcount",
                targetField: "targetfield",
                target: {
                    color: "#FF0000"
                },
                gap: 1
            }],
Back to Top
Kendo UI is VS 2017 Ready