CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-chart
learner
learner

Reputation: 541

Kendo Bar Chart With Multiple Vertical Axis

I have a chart where I would like to display two vertical axis: value and percentages for alcohol & drugs in a given month. Graph is showing columns for drug and alcohol by linking them to value field but it is not displaying percentages. I want the graph to show both values and percentages for each month for both drugs and alcohol.

Here is the Fiddle

HTML

<div id = "parentDiv"></div>

Java Script

var sharedDataSource = new kendo.data.DataSource({
    data: [
        { id: 1, value: 10, seriesTitle:"Alcohol", percentValue: 33, item: "Apr 15", ServiceName:"Test1" },
        { id: 2, value: 20, seriesTitle:"Drug", percentValue: 67, item: "Apr 15",ServiceName:"Test1" },       
        { id: 3, value: 10, seriesTitle:"Alcohol", percentValue: 50, item: "May 15",ServiceName:"Test1" },      
        { id: 4, value: 10, seriesTitle:"Drug", percentValue: 50, item: "May 15",ServiceName:"Test1" }   
    ],
    schema: {
        model: {
            id: "id",
            fields: {
                id: { type: "number", editable: false },
                value: { type: "number" },
                seriesTitle: { type: "string" },
                percentValue: { type: "number" },
                item: { type: "string" },
                ServiceName: { type: "string" }
            }
        }            
    },
    sort: [
                { field: "ServiceName", dir: "asc" }               

          ],
    group: [
                { field: "seriesTitle" }                                    
            ]
});

createChart();
function createChart()
{
$("#parentDiv").kendoChart({
    dataSource: sharedDataSource,
    autoBind: false,
    legend: {
            position: "top"
        },
    chartArea:{
        width:200,
        height:140},
      valueAxis: [{
          //min: 100,        
            field: "value"
        }
                  ,
                  {
                      labels: {
                format: "{0}%"
            },
          //min: 100,
          //max: 100,
                     // name; "percentValue"
            field: "percentValue"
        }
       ],

    categoryAxis: {
        field: "item"   
    },
    series: [
        { field: "value" }
    ]     
});
}
sharedDataSource.read();

External Sources

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.mobile.all.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>

Upvotes: 0

Views: 1299

Answers (1)

learner
learner

Reputation: 541

I was trying to create multiple axis from one series, Telerik support says that this behaviour is not supported. They suggest to display the percentage value in separate series or as label of the value series.

Upvotes: 1

Related Questions