Results 1 to 10 of 10

Thread: Hide Values from a Line Serie of a Chart

  1. #1

    Default Hide Values from a Line Serie of a Chart

    Hi,


    I have a chart with 4 Series (3 lines and a column).

    My X Axy is a day of the month timeline and I would like to show only the last value of the 3 line serie (the other values are nill in the store, and since the chart automatcly transforms null values to 0, the serie is shown completely.

    Thanks in advance

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409

    Default

    You can hide point by using null/undefined for values. If this does not solve your problem, please provide a small working example and more detail so we can review the problem.

    Regards,
    Scott.

  3. #3

    Default

    I tryed that and i noticed that ExtJS assumes ZERO when the value in the store is NULL, and the chart is populated all the way with zeros until the point i want to show.

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409

    Default

    You will need to make sure to set the data to null/undefined after it is loaded into store.
    (value > 0) ? value : null

    Regards,
    Scott.

  5. #5

    Default

    Im pretty sure the Value is NULL.

    I got this info from the console from chrome (PREVISAO is the item that shouldnt be showing in the graphic, and its shown as ZERO). As you can see i have 31 items on the array (1 for each day) and my objective is to show it only at the last day (this is the only day that i have a value != null):
    • items: Array[31]
      • 0: constructor
        • data: Object
          • EMISSAO: 1
          • FATANOANTERIOR: 4399.29
          • FATDIA: 118846.25
          • FATMESPASSADO: 0
          • METAMES: 22355184.72
          • METAQTD: 1002846
          • PREVISAO: null

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409

    Default

    Using the example in the API, the metric 4/5 points are not displayed. If the values were 0, then you would see the points.

    Code:
    var store = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
        data: [
            { 'name': 'metric one',   'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8,  'data5': 13 },
            { 'name': 'metric two',   'data1': 7,  'data2': 8,  'data3': 16, 'data4': 10, 'data5': 3  },
            { 'name': 'metric three', 'data1': 0.1,  'data2': 2,  'data3': 14, 'data4': 12, 'data5': 7  },
            { 'name': 'metric four',  'data1': undefined,  'data2': 14, 'data3': 6,  'data4': 1,  'data5': 23 },
            { 'name': 'metric five',  'data1': undefined,  'data2': 4,  'data3': 36, 'data4': 13, 'data5': 33 },
            { 'name': 'metric six',   'data1': 1,  'data2': 4,  'data3': 36, 'data4': 13, 'data5': 33 }
        ]
    });
    
    Ext.create('Ext.chart.Chart', {
        renderTo: Ext.getBody(),
        width: 500,
        height: 300,
        animate: true,
        store: store,
        axes: [
            {
                type: 'Numeric',
                position: 'left',
                fields: ['data1', 'data2'],
                label: {
                    renderer: Ext.util.Format.numberRenderer('0,0')
                },
                title: 'Sample Values',
                grid: true,
                minimum: 0
            },
            {
                type: 'Category',
                position: 'bottom',
                fields: ['name'],
                title: 'Sample Metrics'
            }
        ],
        series: [
            {
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                xField: 'name',
                yField: 'data1',
                markerConfig: {
                    type: 'cross',
                    size: 4,
                    radius: 4,
                    'stroke-width': 0
                }
            },
            {
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                fill: true,
                xField: 'name',
                yField: 'data2',
                markerConfig: {
                    type: 'circle',
                    size: 4,
                    radius: 4,
                    'stroke-width': 0
                }
            }
        ]
    });
    Scott

  7. #7

    Default

    Got it.


    I will change the null values do undefined inside the php (who delivers the ajax response to the store) and see what happens.

    I will reply with the result. Thank you.

  8. #8

    Default

    Well, i cant define the field PREVISAO as 'undefined' (i can pass it as a string, but not as a value).

    This is my PHP code:

    if ($x == 31)
    {
    @$previsao = ($totalfat / $diasfaturados) * $diasuteis;
    }

    $arr[] = array (
    "FATDIA" => $fatdia,
    "EMISSAO" => $x,
    "VALORFAT" => $faturamento,
    "PREVISAO" => $previsao
    );

    I have a for using $x as counter. As you can see i only define the $previsao variable when $x = 31. From 1 to 30 I dont define the variable and in the store the field PREVISAO is set to null (as I show in the previous post).

    So my question now is how do I pass the value of the field as UNDEFINED via php-json, not NULL (by not defining the variable)?

  9. #9

    Default

    Still nothing...

  10. #10
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409

    Default

    You can create a load listener on the store and check the value and if it is <= 0, then set the value in the store to undefined.

    Scott.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •