This is a migrated thread and some comments may be shown as answers.

Multi axis panning and zooming line charts

2 Answers 178 Views
Charts
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 29 Mar 2016, 03:39 PM
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"
        },
    }
};

2 Answers, 1 is accepted

Sort by
0
James
Top achievements
Rank 1
answered on 30 Mar 2016, 06:52 PM

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' }
                    }
                }
            }
        }

0
Daniel
Telerik team
answered on 01 Apr 2016, 07:56 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
James
Top achievements
Rank 1
Answers by
James
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or