Auto Scaling in x-axis due to large number of values

[Jud]

Hi Telerik Team,

I am new to Kendo UI charts. Thanks for creating such an amazing product. It really has made developer's life easier. Now lets come to the point. Do Kendo charts provide any provision for auto scaling x axis? like I have a large number of values which mess up the chart display.


Thanks

[T. Tsonev]

Hi,

Thank you for the good words.

The X-Axis does not support automatic scaling and we're not quite sure how it should work. Changing the overall width is not an option, as it will affect the page layout. Dropping some of the labels is, but won't work well for anything but date values.

Can you please share more details about your scenario? An image of what the chart looks like with your data would be very welcome.

What you can do at the moment is to rotate the labels 90 degrees to save space. 
categoryAxis: {
    field: "year",
    labels: {
        rotation: -90 
    }   
}

Happy Holidays!

Best Regards,
Tsvetomir Tsonev
the Telerik team

[Jud]

'problem.png' is a sample chart which shows minutes on x -axis and no. of sessions on y-axis. It looks fine now. But imagine a scenario having thousands of records. In the scenario having thousands of records, the x-axis should automatically display a continuous range of values, like 0-0.2, 0.2-0.4, 0.4 to 0.6 and so on.

'solution.png' represents a solution to this problem which is implemented via RadChart. Auto-Scaling functionality can be achieved in RadCharts by setting AutoScale="true" for x or y axis.

Following is my code:

  $(document).ready(function () {


var data = [{ "Mins": 0.033333, "NoOfSessions": 1, "OS": "Android v2.x", "ExtensionData": {} }, { "Mins": 0.033333, "NoOfSessions": 1, "OS": "iPhone v4.x", "ExtensionData": {} }, { "Mins": 0.050000, "NoOfSessions": 1, "OS": "WinCE v7.x", "ExtensionData": {} }, { "Mins": 0.066666, "NoOfSessions": 1, "OS": "iPhone v4.x", "ExtensionData": {} }, { "Mins": 0.066666, "NoOfSessions": 4, "OS": "WinCE v7.x", "ExtensionData": {} }, { "Mins": 0.083333, "NoOfSessions": 1, "OS": "iPhone Simulator v4.x", "ExtensionData": {} }, { "Mins": 0.083333, "NoOfSessions": 1, "OS": "iPhone v4.x", "ExtensionData": {} }, { "Mins": 0.083333, "NoOfSessions": 1, "OS": "WinCE v7.x", "ExtensionData": {} }, { "Mins": 0.100000, "NoOfSessions": 1, "OS": "Android v2.x", "ExtensionData": {} }, { "Mins": 0.100000, "NoOfSessions": 2, "OS": "WinCE v7.x", "ExtensionData": {} }, { "Mins": 0.133333, "NoOfSessions": 1, "OS": "WinCE v7.x", "ExtensionData": {} }, { "Mins": 0.350000, "NoOfSessions": 1, "OS": "WinCE v7.x", "ExtensionData": {} }, { "Mins": 0.400000, "NoOfSessions": 1, "OS": "WinCE v7.x", "ExtensionData": {} }, { "Mins": 0.500000, "NoOfSessions": 1, "OS": "Android v2.x", "ExtensionData": {} }, { "Mins": 0.616666, "NoOfSessions": 1, "OS": "WinCE v7.x", "ExtensionData": {} }, { "Mins": 1.400000, "NoOfSessions": 1, "OS": "WinCE v7.x", "ExtensionData": {}}]
 
 createAverageTimeSpentOnOSChart(data);

});



function createAverageTimeSpentOnOSChart(data){
 var dataSource = new kendo.data.DataSource({
                 data: data,
                 group: {
                     field: "OS",
                     dir: "asc"
                 }
             });
             
             //create a datasource for categories (x-axis).
             var categoriesDataSource = new kendo.data.DataSource({
                 data: data,
                 group: {
                     field: "Mins",
                     dir: "asc"
                 }
             });
            
             var categories = Array();
             categoriesDataSource.read();
             
             var categoriesDataSourceView = categoriesDataSource.view();
             for(i=0;i< categoriesDataSourceView.length;i++){
             categories[i]=categoriesDataSourceView[i].value;
             }
            
             dataSource.read();
             var view = dataSource.view();
             var chartSeries = [];


             for (var groupIx = 0; groupIx < view.length; groupIx++) {
             
                 var group = view[groupIx];

                 var arrTotalSessionsInMins=new Array();
                 for(i = 0; i<categories.length;i++){
                 arrTotalSessionsInMins[i]=totalSessionsInMins(group.items,categories[i]);
                 }


                    chartSeries.push({
                    data: arrTotalSessionsInMins,
                    majorGridLines: {
                    color: "lightGray",
                    width:0.5,
                    visible: true
                 },
                     name: group.value
                 });
             }

             $("#chartAverageTimeSpentOnOS").kendoChart({
                 theme: "default",

                 seriesDefaults: {
                     type: "line",
                     stack: false
                 },
                 tooltip: {
                     visible: true,
                     format: "{0}"
                 },
                 chartArea: {
                         majorGridLines: {
                         color: "lightGray",
                     width:0.5,
                     visible: true
                 },
                     background: "",
                 },
                 categoryAxis: {
                     majorGridLines: {
                         color: "lightGray",
                     width:0.5,
                     visible: true
                 },
                 majorTickType: "none",
                 minorTickType: "none",
                 minorGridLines: {
                     color: "lightGray",
                     width: 0.5,
                     visible: true
                     },  
                     categories: categories,
                     labels: { rotation: 20 }
                 },
                 valueAxis: {
                      majorGridLines: {
                         color: "lightGray",
                     width:0.5,
                     visible: true
                 },
                 },
                 series: chartSeries
             });
}

  function totalSessionsInMins(items, min){
   for (var i = 0; i < items.length; i++) {
    if (items[i].Mins == min)
            {
            //alert("No Of Sessions"+items[i].NoOfSessions+"      OS:"+items[i].OS+"              Mins: "+items[i].Mins);
                return items[i].NoOfSessions;
            }
   }
  }

[T. Tsonev]

Hello,

Thanks for the additional information.

The line chart renders a categorical (discrete) X axis that does not support scaling. Have you considered using an XY-Scatter Line chart instead? In this chart both axes are numeric and support scaling.

I hope this helps. 

Kind regards,
Tsvetomir Tsonev
the Telerik team

[Jud]

Ohk thanks ...it has solved my problem :)  I had to use Scatter line charts of Kendo UI