Custom chart/ Histogram chart cannot not render

Hello, I created a custom histogram chart:

CustomChart {
  fields {
    field data {
      type: 'dimension'
    }
  }

  options {
    option max_bins {
      label: "maximum number of bins"
      type: 'number-input'
      default_value: 50
    }
    option tick_count {
      label: "tick count"
      type: 'number-input'
      default_value: 5
    }
    option log_base {
      label: "log base"
      type: 'number-input'
      default_value: 2
    }
  }

  template: @vgl
  {
    "data": {"values": @{values}},
    "transform": [
      {"calculate": "log(datum.@{fields.data.name})/log(@{options.log_base.value})", "as": "log_x"}, 
      {"bin": {"maxbins": @{options.max_bins.value}}, "field": "log_x", "as": "bin_log_x"}, 
      {"calculate": "pow(@{options.log_base.value}, datum.bin_log_x)", "as": "x1"}, 
      {"calculate": "pow(@{options.log_base.value}, datum.bin_log_x_end)", "as": "x2"}
    ],
    "mark": {
      "type": "bar",
      "tooltip": true
    },
    "encoding": {
      "x": {
        "field": "x1",
        "scale": {"type": "log", "base": @{options.log_base.value}},
        "axis": {"tickCount": @{options.tick_count.value}}
      },
      "x2": {"field": "x2"},
      "y": {"aggregate": "count"}
    }
  }
  ;;
}

At first, it work well, but the next day, when I used it again, it did not render anything. I do not know what happened.
When it worked:

Now:

Hi Quang, please double check the data type of your Amount Out Usd field

Looking into your custom chart definition, the field data should be a number field.
To ensure it, there are 2 options:

  1. add data_type: 'number' to your field definition
    image
    Or
  2. use measure as field type
    image

Hello @kaid , the problem is solved by change datum.@{fields.data.name} to datum['@{fields.data.name}'], the same for datum.bin_log_x to datum['bin_log_x']
But now, I have a new issue.
In editor mode, the chart renders fine:


But when in the dashboard. It not show anything:

Note:

  • rounded volume is the amount out usd but rounded into format “.2f”. It is a custom dimension that I added into the model (e.g bigquery: @sql{ROUND(amount_out_usd, 2)} )
  • If I use the ordinary amount out usd, the chart renders okay in both editor mode and dashboard. I think maybe it’s the custom dimension problem
1 Like

@kaid I found more information, it looks like the chart will only render if I limit the size.
The reason that my chart only renders in editor mode is that in that mode, the executed query is the automatic limit of 100000
Is there any way that I can build a histogram of full data size?

@Quang_Ng let me check again. I’m trying to reproduce the issue on my side first.
I will inform you for any updates

Hi @Quang_Ng, could you double check if your data contains values 0 or NULL?
The browser console should show something like below in this case
image

If this is the cause, you can either update your custom chart definition to properly handle 0 and null values, or add viz conditions to filter those values out

2 Likes

Thank you very much, It worked now.

1 Like

A post was split to a new topic: Custom Chart - Waterfall not working