Vega Error

Hello expert,
Vega Graph is working perfectly, but getting 0 at x-axis ... why 0 ?

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "title": "Difference par Jour",
  "data": {
    "url": {
      "%context%": true,
      "%timefield%": "@timestamp",
      "index": "terrena_client_vm",
      "body": {
          "aggs": {
      "day_date_histogram_of_timestamp": {
        "date_histogram": {
          "field": "@timestamp", 
          "calendar_interval": "day"
        },
        "aggs": {
          "sum_of_Jobsize": {
            "sum": {"field": "Job_Size(GB)"}
          },
          "serial_diff_of_sum_of_Jobsize": {
            "serial_diff": {"buckets_path": "sum_of_Jobsize", "lag": 1}
          }
        }
      }
    },
    "size":0 
      }
    },
    "format": {"property": "aggregations.day_date_histogram_of_timestamp.buckets"}
  },
    transform: [
    {
      window: [
        {
          op: lead
          field: key_as_string
          offset: 1
          as: next_lead
        }
      ]
    }
    {
  calculate: "datum.sum_of_Jobsize.value",
  as: "sum"
}

{
  calculate: "datum.key_as_string",
  as: "lead"
}

{
  calculate: datum.serial_diff_of_sum_of_Jobsize != null ? datum.sum - datum.serial_diff_of_sum_of_Jobsize.value :0
  as: previous_sum
}
{
  calculate: datum.serial_diff_of_sum_of_Jobsize != null ? datum.serial_diff_of_sum_of_Jobsize.value :datum.sum
  as: amount
}
{
  calculate: ( datum.serial_diff_of_sum_of_Jobsize != null && datum.amount > 0 ? '+' : '') + datum.amount 
  as: text_amount
}
{
  calculate: (datum.sum + datum.previous_sum) / 2
  as: center
}
{
  calculate: datum.sum < datum.previous_sum ? datum.sum : ''
  as: sum_dec
}
{
  calculate: datum.sum > datum.previous_sum ? datum.sum : ''
  as: sum_inc
}
  ],
  "mark": "line",
  encoding: {
    x: {
      field: key_as_string
      type: ordinal
      sort : null
      axis: {
          title: Days
          labelExpr: datum.label[8]+datum.label[9]
          labelBaseline : bottom
          labelColor: black
          
      }
    }
  }
    layer: [
    {
      mark: {
        type: bar
        size: 20
      }
      encoding: {
        y: {
          field: previous_sum
          type: quantitative
          title: Sum of Job Size
        }
        y2: {
          field: sum
        }
        color: {
          condition: [
            {
              test: datum.serial_diff_of_sum_of_Jobsize == null
              value: "yellow"
            }
            {
              test: datum.sum < datum.previous_sum
              value: "pink"
            }
          ]
          value: "lightgreen"
        }
      }
    }
    {
      mark: {
        type: rule
        opacity: 1
        color: "#404040"
        strokeWidth: 2
        xOffset: -10
        x2Offset: 10
      }
      encoding: {
        x2: {
          field: next_lead
        }
        y: {
          field: sum
          type: quantitative
        }
      }
    }
    {
      mark: {
        type: text
        dy: -18
        baseline : bottom
      }
      encoding: {
        y: {
          field: sum_inc
          type: quantitative
        }
        text: {
          field: sum_inc
          type: nominal
          format:.1f
        }
      }
    }
    {
      mark: {
        type: text
        dy: 13
        baseline: middle
      }
      encoding: {
        y: {
          field: sum_dec
          type: quantitative
        }
        text: {
          field: sum_dec
          type: nominal
          format: .1f
        }
      }
    }
    {
      mark: {
        type: text
        dy :0
        fontWeight: bold
        baseline : line-bottom
      }
      encoding: {
        y: {
          field: center
          type: quantitative
        }
        text: {
          field: text_amount
          type: nominal
          format: .1f
        }
        color: {
          condition: [
            {
              test: datum.serial_diff_of_sum_of_Jobsize == null
              value: "green"
            }
          ]
          value: black
        }
      }
    }
  ]
    config: {
    text: {
      fontWeight: bold
      color: red
    }
  }
}

@krunal it looks like this is because you have dy: -18 on your text.

@wylie Thanks
But how I can remove 0.... I dont want 0 in my chart

Is there any possibility that i can put if condition to remove 0... or i can change color to white if value is 0...

Yes, both are possible. You should look into the documentation for Vega to see examples where you can apply conditional logic.

1 Like

Thanks a lot @wylie for providing useful hints.

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.