Multi axis panning and zooming line charts

3 posts, 0 answers
  1. James
    James avatar
    17 posts
    Member since:
    Sep 2014

    Posted 29 Mar Link to this post

    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. James
    James avatar
    17 posts
    Member since:
    Sep 2014

    Posted 30 Mar in reply to James Link to this post

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

  3. Kendo UI is VS 2017 Ready
  4. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 01 Apr Link to this post

    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!
     
Back to Top