1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    5
    Answers
    1
    Vote Rating
    0
    rolska is on a distinguished road

      0  

    Default Answered: Terminating / Stopping a Line Chart

    Answered: Terminating / Stopping a Line Chart


    I'm looking to have two individual line series on one chart. One series will have complete data while the other will be display partial data.

    I've tried stopping the partial series with null / undefined / blank string values with no luck. I'm noticing that the path of the stroke is as if the chart is still an area chart-- it colors the entire outline of the fill (even if there is no fill) and will always try to close the stroke path.

    Using 'null' / and empt datapoints:

    ChartTest.png

    Using 'undefined' datapoints:

    ChartTest2.png

    Basically, I would like to just have a single line that stops rendering if there's no y-axis data. There seems to be more discussion of this for Ext.JS but I've yet to see an answer for ST 2.1.

    Seems like this should be an easy fix but I can't find a solution! Any suggestions?

    Code:
    var config = {
     store: {
                  fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
                  data: [
                      {'name':'metric one', 'data1':7, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
                      {'name':'metric two', 'data1':5, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
                      {'name':'metric three', 'data1':10, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
                      {'name':'metric four', 'data1':'', 'data2':14, 'data3':6, 'data4':1, 'data5':23},
                      {'name':'metric five', 'data1':'', 'data2':38, 'data3':36, 'data4':13, 'data5':33}
                  ]
                },
                axes: [{
                    type: 'numeric',
                    position: 'left',
                    fields: ['data1'],
                    maximum: 20,
                    title: {
                        text: 'Sample Values',
                        fontSize: 15
                    },
                    grid: true,
                    minimum: 0
                }, {
                    type: 'category',
                    position: 'bottom',
                    fields: ['name'],
                    title: {
                        text: 'Sample Values',
                        fontSize: 15
                    }
                }],
                series: [{
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    style: {
                        stroke: 'red',
                        lineWidth: 10,
                        dataClose: true
                    },
                    xField: 'name',
                    yField: 'data1',
                    marker: {
                        type: 'path',
                        stroke: 'blue',
                        lineWidth: 0
                    }
                }]
            };
    Last edited by rolska; 10 Dec 2012 at 8:27 PM. Reason: Added second image of chart when using "undefined" data points.

  2. The chart only currently supports a full line, it cannot have breaks in it.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Answers
    3517
    Vote Rating
    856
    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


    The chart only currently supports a full line, it cannot have breaks in it.
    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 Premium Member
    Join Date
    Jan 2013
    Posts
    14
    Answers
    1
    Vote Rating
    0
    rianatdigitaltrike is on a distinguished road

      0  

    Default Too bad

    Too bad


    This sort of behavior is necessary if you want people to be able to mix series types. The bar series adds a gap between the vertical axes and the first and final data points. In a chart where you just have a line series, this works because their first and final points are on the axes but with that gap added from the bar chart, the first and final strokes down to the x axis are visible.

    I think the source code documentation might be out of date too because the code below is in the Line series source code documentation and it suggests that false values would cause a break in the line.


    Code:
    if (yValue === false) {                
      if (path.length == 1) {                    
        path = [];                }                
      onbreak = true;                
      me.items.push(false);                
      continue;            }