0

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>
learner
  • 581
  • 7
  • 27
  • http://demos.telerik.com/kendo-ui/bar-charts/multiple-axes – Mark May 01 '15 at 17:26
  • I have checked it before raising this question here. I couldn't find the missing link in my code. Thanks for pointing it out anyways. – learner May 02 '15 at 15:02

1 Answers1

1

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.

learner
  • 581
  • 7
  • 27