Need Source code Below Format Kendo Chart with in the Angular 

Present below is jQuery, but instead of jQuery using angular support source code

https://docs.telerik.com/kendo-ui/knowledge-base/display-time-on-value-axis#solution

Please find the reference image

 

 

Hi, I want to create a bullet chart in the form of group data and set a unique target data, color, tooltip-template for each bar like "column chart" in picture but I can't find how to bind data for bullet chart 

Is there a way to make the chart look like the example? Please advise if there is a more suitable graph format to display this type of data.

 

  var testData3 = [
        { name: "data 1", data: [[200, 350], [150, 170]], color: "#E56997", target: { color: "#E56997" }, tooltip: { template: "#= dataItem #" } },
        { name: "data 2", data: [[210, 250], [190, 300]], color: "#062cda", target: { color: "#062cda" }, tooltip: { template: "#= dataItem.name #" } },
        { name: "data 3", data: [[350, 200], [200, 200]], color: "#fd0166", target: { color: "#fd0166" }, tooltip: { template: "#= value #" } },
        { name: "data 4", data: [[450, 200], [270, 400]], color: "#9F00FF", target: { color: "#9F00FF" }, tooltip: { template: "#= value #" } },
    ]

    $("#testChart").kendoChart({
        title: {
            text: "Bullet",
            font: fontSize
        },
        legend: { visible: false },
        dataSource: {
            data: testData3,
        },
        seriesDefaults: {
            type: "verticalBullet",
            overlay: { gradient: "none" },
            labels: {
                visible: true,
                background: "transparent",
                color: "white"
            },
            tooltip: {
                visible: true,
            }
        },
        series: testData3,
        categoryAxis: {
            categories: ["Jul", "Aug", "Sep"]
        }
    });

In order to make an example of a real-time changing bullet chart, I hope that it's possible to bind the series data to the value of slider.

 

Currently I understand chart can use source binding, but I wonder if it's possible to bind one of series data of bullet chart to the value of slider (for example, the current value is bound, and target, category, color are fixed).

Take this for example:

<input data-role="slider" data-bind="value: selectNumber">

<div data-role="chart" data-series="[{ type: 'bullet', currentField: 'current', targetField: 'target', colorField: 'color', target: { color: 'black' } }]" data-bind="source: dsChart"></div>

 

I hope that I can only bind the current value instead of a whole data source (dsChart) to the value of slider (selectNumber).

Furthermore, I also don't know how to bind the data source (dsChart) to the value of slider (selectNumber).

 

Can anyone give me a hint or an example?

 

Thanks.

what 

Marketing has specific design in mind for my bullet chart. I'm using a vertical Bullet Chart. I want Labels on the top like the Bar Graph.  Oh did I mention I'm using ICENUM to do the bullet chart on the phone. 

I've tried to add the labels property found in the documentation;

 series: [
                    labels:
                   { 
                       visible: true,
                      format: "{0}",
                      font: "14px Arial",
                 },

It's not working for me. 

Here is my complete script: 

$("#bar-chart").kendoChart({
                theme: global.app.chartsTheme,
                renderAs: "svg",
                legend: {
                    position: "bottom"
                },
                seriesDefaults: {
                    type: "column"
                },
                series: [
                    {   
                        type: "verticalBullet",
                        color: "#d87635",
                        currentField: "score",
                        targetField: "average",
                        labels:
                       {
                           visible: true,
                           format: "{0}",
                           font: "14px Arial",
                       },
                        target: {
                            color: "#444",
                            dashType: "dot",    // I want a dotted line too. That isn't working either.
                            line: {
                              width: 1,
                            }        
                        },                       
                        data: [
                           {
                                score: 93.7,
                                average: 65.2,                              
                            }, {
                                score: 80.2,
                                average: 22.2,
                            }, {
                                score: 60.8,
                                average: 35.2,
                            }, {    
                                score: 82.1,
                                average: 45.2,                                
                            }, {
                                score: 74.2,
                                average: 55.2,
                            }
                        ]
                    }
                ],
                categoryAxis: {
                    labels: { rotation: -45 },
                    categories: ["Sales & Contracting", "Implementation & Training", "Functionality & Upgrades", "Service & Support", "General"],
                    line: {
                        visible: false
                    },
                    color: "#444", 
                    axisCrossingValue: [0, 0, 100, 100]
                },
                 tooltip: {
                    visible: false
                }
            }).data("kendoChart");

Any Help would be greatly appreciated. 

I wish to set the Target bar to show a range.  My desire is to have the target bar show the min and max value (range) and then a line as the current value.  Right now I can only set the target value Max which shows a bar from the origin of the chart to the set value.  I wish to control both ends of the target bar.   Is this possible.

Marketing has specific design in mind for my bullet chart. I'm using a vertical Bullet Chart. I need the target line to be a dotted line.  Oh did I mention I'm using ICENUM to do the bullet chart on the phone. It's looking good.

I've tried to add the labels property found in the documentation;

 series: [
                    {   
                        target: {
                            color: "#444",
                            dashType: "dot",
                            line: {
                              width: 1,
                            }
                        }    
                        
It's not working for me. 

Here is my complete script: 

$("#bar-chart").kendoChart({
                theme: global.app.chartsTheme,
                renderAs: "svg",
                legend: {
                    position: "bottom"
                },
                seriesDefaults: {
                    type: "column"
                },
                series: [
                    {   
                        type: "verticalBullet",
                        color: "#d87635",
                        currentField: "score",
                        targetField: "average",
                        labels:   // Did I mention that the labels are not working for me?
                       {
                           visible: true,
                           format: "{0}",
                           font: "14px Arial",
                       },
                        target: {
                            color: "#444",
                            dashType: "dot",    
                            line: {
                              width: 1,
                            }        
                        },                       
                        data: [
                           {
                                score: 93.7,
                                average: 65.2,                              
                            }, {
                                score: 80.2,
                                average: 22.2,
                            }, {
                                score: 60.8,
                                average: 35.2,
                            }, {    
                                score: 82.1,
                                average: 45.2,                                
                            }, {
                                score: 74.2,
                                average: 55.2,
                            }
                        ]
                    }
                ],
                categoryAxis: {
                    labels: { rotation: -45 },
                    categories: ["Sales & Contracting", "Implementation & Training", "Functionality & Upgrades", "Service & Support", "General"],
                    line: {
                        visible: false
                    },
                    color: "#444", 
                    axisCrossingValue: [0, 0, 100, 100]
                },
                 tooltip: {
                    visible: false
                }
            }).data("kendoChart");

Any Help would be greatly appreciated. 

Bullet Chart tooltips are not working in this version I went back to Q2 version and they work fine.

You can see this on your demo page:  http://demos.kendoui.com/dataviz/bullet-charts/index.html

Even though tooltip is specified, it is not showing up.

Thanks!

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.

Hi,

I've been going through the bullet chart documentation and figure out how to manipulate different parts of the chart including the target line. What I have not found is how to set the target in the chart parameters. For instance if my values go from 0-8 and I want me bullet graph target to be 7.7 is there a way to set it right inside of the target :{} parameters and now inside of the JSON as I would have to add this field to the current database, or add formatting after the request. So to keep it simple I would like to set the target: in the Kendo JQuery chart params. Thanks.

Alex