Bullet Graph Datasource

[Alexander]

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.

[Iliana Dyankova]

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

[Alexander]

I will be able to check it tomorrow and let you know. Thanks.

[Alexander]

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?

[Alexander]

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
        }],