CODEWITHSUNDEEP
jquerykendo-uikendo-datavizkendo-chart
Rakesh Goyal
Rakesh Goyal

Reputation: 3231

Kendo UI Bullet chart multiple targets and Labels

I want to create a bullet chart with multiple targets having different color and labels. Also scale interval should be 50. I tried this http://dojo.telerik.com/iXaSa/2 but step label is not working and not sure how to change color of targets and put labels.

Any help in this regard would be highly appreciated.

Upvotes: 0

Views: 1215

Answers (1)

OnaBai
OnaBai

Reputation: 40917

Target colors might be either a string or a function. If you defined it as a function, it receives an argument with information about the series. One item of this information is index that refers to the series being displayed.

You can define color in target as:

target: {
    color: function (arg) {
        var colors = [ "red", "white", "blue" ];
        return colors[arg.index];
    },
    ...
}

See your code as a Stack Overflow snippet here:

function createChart() {


  $("#chart-temp").kendoChart({
    legend: {
      visible: true
    },


    series: [{
      type: "bullet",
      data: [[0,40],[0,60],[0,50]],

      target: {
        color: function (arg) {
          var colors = [ "red", "white", "blue" ];
          return colors[arg.index];
        },

        line: {
          width: 5

        }
      }
    }],
    categoryAxis: {
      labels:{
        step:50
      },
      majorGridLines: {
        visible: false
      },
      majorTicks: {
        visible: false
      }

    },

    valueAxis: [{
      plotBands: [{
        from: 0, to: 100, color: "green", opacity: .3
      }],
      majorGridLines: {
        visible: false
      },

      min: 0,
      max: 100,
      minorTicks: {
        visible: false
      }
    }],
    tooltip: {
      visible: false,
      template: "Maximum: #= value.target # <br /> Average: #= value.current #"
    }
  });
}

$(document).ready(function() {
  createChart();
});
.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;
}
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>

<table class="history">
  <tr>
    <td class="item">temp</td>
    <td class="chart"><div id="chart-temp"></div></td>
  </tr>
</table>

Upvotes: 1

Related Questions