[Solved] Multi axis panning and zooming line charts

[James]

I'm trying to get panning and zooming working with a multi-axis line chart.  I had the multi-axis line chart working with series data, but it's my understanding that I need to use a dataSource in order to get panning and zooming working.  I've got panning and zooming working with a single line series, but can't get it working with multi-axis.  No lines show in the chart.  The panning and zooming functionality does seem to be there though.

 

 

 

 

It seems that there might be multiple ways to do it, but I used the following example on jsbin for my configuration

http://jsbin.com/rudikuyuju/edit?html,js,output

Here is one object of the dataPoints.data array defined in dataSource

0:Object
A1C:0
AMAvg:170
Average30Days:142
Average60Days:140
Average90Days:144
CollectionDate:"/Date(1457931600000)/"
LunchAvg:162
PMAvg:190


Note that I don't use all the fields for this one chart.  I have another chart that is configured using the rest of the fields.  I don't know if that matters or not.  Also, I'm pretty sure that CollectionDate is ok....that's ASP.NET format and works on the chart with just one series.

 

Here's the typescript code:

 

 

 

let chartConfiguration: ChartConfiguration = {

    renderAs: "canvas",

    dataSource: {

        data: dataPoints.data,

        schema: {

            model: {

                CollectionDate: { type: 'date' },

                AMAvg: { type: 'number' },

                lunchAvg: { type: 'number' },

                PMAverage: { type: 'number' }

            }

        }

    },

    series: [

        {

            type: 'line',

            field: 'AMAvg',

            axes: 'glucose',

            categoryField: 'CollectionDate',

            markers: {

                visible: false

            }

        },

        {

            type: 'line',

            field: 'LunchAvg',

            axes: 'glucose',

            categoryField: 'CollectionDate',

            markers: {

                visible: false

            }

        },

        {

            type: 'line',

            field: 'PMAvg',

            axes: 'glucose',

            categoryField: 'CollectionDate',

            markers: {

                visible: false

            }

        },

 

    ],

    pannable: {

        lock: "y"

    },

    zoomable: {

        mousewheel: {

            lock: "y"

        },

        selection: {

            lock: "y"

        }

    },

    valueAxes : [{

        name: "glucose",

        title: { text: "glucose" },

        min: 50,

        max: 399

    }],

    seriesDefaults: {

        type: 'line',

        line: {

            line: {

                style: 'smooth'

            }

        }

    },

    tooltip: {

        visible: true,

        format: '{0}',

        template: '${value} '

    },

    categoryAxis: {

        type: "category",

        field: 'CollectionDate',

        baseUnit: 'days',

        baseUnitStep: 1,

        min: 0,

        max: 15,

        labels: {

            format: "{0:MM/dd/yy }",

            rotation: "auto"

        },

    }

};

[James]

I was able to solve it by transforming the data:

dataPoints.data.map(dp => {
    data.push(
        { type: "AMAvg", value: dp.AMAvg, date: dp.CollectionDate },
        { type: "LunchAvg", value: dp.LunchAvg, date: dp.CollectionDate },
        { type: "PMAvg", value: dp.PMAvg, date: dp.CollectionDate }
)})

and then using grouping

dataSource: {
            data: groupedDataPoints.data,
            group: {
                field: "type"
            },
            schema: {
                model: {
                    fields: {
                        date: { type: 'date' },
                        value: { type: 'number' }
                    }
                }
            }
        }

[Daniel]

Hello James,

Using a dataSource is not requirement for the panning and zooming as they operate only with the axes ranges.
As for the problem - there are a few issues in the configuration that you provided:

• The series axis should be set as axis instead of axes.
• The series.categoryField and categoryAxis.field options should not be used together. Please try removing the categoryAxis.field option.

Also, please try to remove the axes min and max options. There might be no points in the specified range.

Regards,
Daniel
Telerik