how to make horizontal lazy loading by scroll in column chart?

[morteza]

I have a big set of data which should be shown on column chart,i wondering if there is a way of showing them but using lazy loading,imagine the number of columns is 300 or more,i want to show max 25 column ,the next set should come after i scroll horizontally ,i would appreciate if you create a demo to help me out with this problem

[Tsvetina]

Hi Morteza,

If the data that you need to visualize is Date-based, it would be easiest to achieve your goal using the StockChart. You can see a demo here:
Stock Charts / Virtualization

This demo shows Candlestick series, but you can replace them with Column, Line or any other categorical series.

If your data is not Date-based, than you can follow the example in the Custom Pan and Zoom demo, where the DataSource data is queried manually on pan and zoom. In this example, if the DataSource is bound to remote data with server paging and sorting enabled, the query method will trigger requests to the server with the specified parameters:

ds.query({
    skip: newStart,
    page: 0,
    pageSize: viewSize,
    sort: SORT
});

Regards,
Tsvetina
Progress Telerik

[morteza]

thanks,the Pan and Zoom seems to be fine,but there are two thing regarding this approach ,i have multi axis chart,:

 

 $("#chartProAvail").kendoChart({
        chartArea: {
            background: "#fcfcfc",
        },
        dataSource: data,
        series: [{
            axis: "l100km",
           // data: data,
          
            type: "column",
            // name: "DURATION",
            color: "#008080",
            field: "ProductionValue",
            categoryField: "TurbineName"
        },

        {

           // data: data,
            axis: "ava",
            type: "line",
            //name: "DURATION",
            color: "#0000FF",
            field: "WindSpeed",
            categoryField: "TurbineName",
            tooltip: {
                template: "Wind Speed:#= value #"
            }
        },
         {
            // data: data,
             axis: "pwq",
             type: "line",
             //name: "DURATION",
             color: "#ff9900",
             field: "PowerCurveQuality",
             categoryField: "TurbineName",
             tooltip: {


                 template: "Power Curve Quality:#= value #"
             }
         }



        ],
        pannable:true,
        zoomable: true,
     
        valueAxes: [
                         {
                             name: "l100km",
                             title: { text: "Production (kWh)" },
                             color: "#008080",
                         },

            {
                name: "ava",
                title: { text: "Wind Speed (m/s)" },
                color: "#0000FF",
                min: 0,
                max: 30,
                majorUnit: 5,

            },
             {
                 name: "pwq",
                 title: { text: "Power Curve Quality (%)" },
                 min: 0,
                 max: 100,
                 majorUnit: 10,
                 color: " #ff9900",
             },
        ],
        categoryAxis: {
           min:0,
           max: 20,
            axisCrossingValue: [0, 20, 20],

            majorGridLines: {

                visible: false


            },
            line: {



                visible: true
            },

            labels: {

                rotation: 340

            },


        },

        tooltip: {
            visible: true,
            template: " #= value #"
        },
        seriesClick:seriesClickCallback,
    });

 

 

when i start scrolling the right axis also moves!what should i do to keep fixed all the axis's (in multi Axis) while scrolling left or right

[Tsvetina]

Hello Morteza,

This could happen if the indexes used in the axisCrossingValues setting are smaller than the total number of categories in the Chart. Try using a very big number:

categoryAxis: {
  min: 0,
  max: 5,
  // Align the first two value axes to the left
  // and the last two to the right.
  //
  // Right alignment is done by specifying a
  // crossing value greater than or equal to
  // the number of categories.
  axisCrossingValues: [0, 0, 1000, 1000]
}

Here is a Dojo where I have two value axes on each side of the Chart and panning works as expected:
https://dojo.telerik.com/otEvUtIV

Regards,
Tsvetina
Progress Telerik

[morteza]

Thanks a lot,it works!