1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    7
    Answers
    2
    Vote Rating
    0
    jmayer is on a distinguished road

      0  

    Default Answered: Extra Data Points in Chart

    Answered: Extra Data Points in Chart


    On a chart, I have a line series that only displays the values 130 and 30 and I noticed when the data rises from 30 to 130 or drops from 130 to 30, an extra point is generated in between the rise or drop. I doubled checked the table which stores the values for the series and it only contains the values 130 and 30.

    Does the chart create extra points on sudden rises or falls? Or, am I doing something wrong?

    Here is how I'm generating the series in the controller:

    var params = { Fnct: 'GetPensByChart', ChartId: dcrChart.chart.get('idDataChartRecorders') };
    var store = new DCR.store.Pens();

    sender.series.clear();
    sender.axes.items[0].fields = new Array();

    store.load({
    callback: function(records, operation, success){
    store.each(function(record) {
    if (record.get('Visible') == 1){
    sender.series.add({
    type: 'line',
    axis: 'left',
    highlight: {
    size: 7,
    radius: 7,
    },
    markerConfig: {
    type: 'circle',
    fill: record.get('Color') != "" ? record.get('Color') : '#00ff00',
    radius: record.get('Width'),
    size: record.get('Width'),
    'stroke-width': 0,
    },
    selectionTolerance: 2,
    showInLegend: true,
    showMarkers: true,
    style: {
    fill: record.get('Color') != "" ? record.get('Color') : '#00ff00',
    stroke: record.get('Color') != "" ? record.get('Color') : '#00ff00',
    'stroke-width': record.get('Width'),
    },
    tips: {
    renderer: function(storeItem, item) {
    this.setTitle(item.value[1]);
    },
    },
    title: record.get('Name'),
    xField: 'Timestamp',
    yField: record.get('DataField'),
    });

    //index 0 is y-axis
    sender.axes.items[0].fields.push(record.get('DataField'));
    }
    });
    },
    params: params,
    });
    Attached Images

  2. I forgot to add an answer. Anyways sometime in 2012, I looked at the Ext.chart.series.Line class and in the drawSeries function a shrink function is called when the number of data points exceeds the width of the chart's bbox as seen here:

    ln = xValues.length;
    if (ln > bbox.width) {
    coords = me.shrink(xValues, yValues, bbox.width);
    xValues = coords.x;
    yValues = coords.y;
    }

    so the extra point was really an average between 130 and 30 caused by the shrink function. To fix this, I commented out the shrink code.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,074
    Answers
    3501
    Vote Rating
    854
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Can you provide a locally runnable test case? Meaning your store not load externally but use the data config on the store.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    7
    Answers
    2
    Vote Rating
    0
    jmayer is on a distinguished road

      0  

    Default


    I narrowed my project down so the chart isn't created dynamically and it only uses a local store. Well, I couldn't reproduce the original problem I stated but I stumbled into another one (see attached screenshot).

    To generate the store I'm doing this:

    chart_DataChartRecorder.store = new DCR.store.RawDatas();

    var count = 0;
    var timestamp = dcrChart.startRange.getTime() / 1000;
    var records = new Array();

    while (timestamp <= dcrChart.endRange.getTime() / 1000) {
    var rawData = new DCR.model.RawData({ Timestamp: timestamp,
    Value3: count % 1000 != 0 ? 130 : 30,
    });

    records.push(rawData);

    count += 1;
    timestamp += 10;
    }

    chart_DataChartRecorder.store.loadData(records);

    As you can see in the code snippet I'm only generating the values 130 and 30. I've uploaded all the code for the test case I created.
    Attached Images
    Attached Files

  5. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    7
    Answers
    2
    Vote Rating
    0
    jmayer is on a distinguished road

      0  

    Default


    I forgot to add an answer. Anyways sometime in 2012, I looked at the Ext.chart.series.Line class and in the drawSeries function a shrink function is called when the number of data points exceeds the width of the chart's bbox as seen here:

    ln = xValues.length;
    if (ln > bbox.width) {
    coords = me.shrink(xValues, yValues, bbox.width);
    xValues = coords.x;
    yValues = coords.y;
    }

    so the extra point was really an average between 130 and 30 caused by the shrink function. To fix this, I commented out the shrink code.

Thread Participants: 1

Tags for this Thread