Highcharts visualizations going blank

Apps (Frontend)
1

Dear community,

I frequently run into the problem that highcharts visualizations are visible for a fraction of a second and then blank out and stay blank until a user interaction forces them to reload (e.g. switch to a different page and back)

The following actions can cause the visualizations to go blank:

  • Automatic refresh from updating of datatables
  • Screen resizing
  • Any modification of the app in the app builder

There is no console warning or error or anything else that would indicate the cause of the problem.

Do you know where this problem comes from and how to solve it?

Best regards

3

Hi @johannesheininger,

I forgot to mention it in the first post - all datasources are datatables.

here is the complete app:

  "version": "0.1",
  "global": {
    "styles": {
      "chartColors": [
        "#003f5c",
        "#2f4b7c",
        "#665191",
        "#a05195",
        "#d45087",
        "#f95d6a",
        "#ff7c43",
        "#ffa600",
        "#5c0b53",
        "#8a1550",
        "#af3246",
        "#c85739",
        "#d3802c",
        "#d1ab2d",
        "#c0d64b",
        "#9eff82"
      ]
    }
  },
  "screens": [
    {
      "layout": "layout2",
      "conditions": {
        "minScreenWidth": 0
      }
    }
  ],
  "layouts": [
    {
      "id": "layout2",
      "type": "flexGrid",
      "config": {
        "grid": {
          "configs": [
            {
              "columns": "1fr",
              "rows": "1fr 1fr",
              "gap": "5px",
              "template": [
                "Container1",
                "Container2"
              ]
            }
          ],
          "noPadding": true
        },
        "containers": [
          {
            "id": "Container1",
            "appearance": []
          },
          {
            "id": "Container2"
          }
        ]
      },
      "placements": [
        {
          "containerId": "Container1",
          "elementId": "training_efforts_by_topic_element"
        },
        {
          "containerId": "Container2",
          "elementId": "training_efforts_by_team_element"
        }
      ]
    }
  ],
  "datasources": [
    {
      "id": "training_efforts_by_topic_datasource",
      "origin": "datatable",
      "config": {
        "dataId": "0f20a101-e5d8-48a4-b00d-8c973b729e2b",
        "schema": "table"
      }
    },
    {
      "id": "training_efforts_by_team_datasource",
      "origin": "datatable",
      "config": {
        "dataId": "92aedb38-dbd8-46ff-802c-dcbec99bf810",
        "schema": "table"
      }
    }
  ],
  "elements": [
    {
      "id": "training_efforts_by_topic_element",
      "type": "highcharts",
      "source": "training_efforts_by_topic_datasource",
      "sourceOptions": {
        "sql": "select * from inputTable i order by year_month"
      },
      "config": {
        "title": {
          "text": "Training efforts by ticket",
          "style": {}
        },
        "chart": {
          "type": "column"
        },
        "xAxis": {
          "title": {
            "text": "Month"
          }
        },
        "plotOptions": {
          "series": {
            "stacking": "normal",
            "dataLabels": {
              "enabled": true,
              "format": "{point.y:.2f} d"
            },
            "animation": true
          }
        },
        "yAxis": {
          "stackLabels": {
            "enabled": true,
            "format": "{total:.2f} d"
          },
          "title": {
            "text": "Number of open tickets"
          }
        },
        "tooltip": {
          "pointFormat": "{series.name}: {point.y:.2f}"
        }
      }
    },
    {
      "id": "training_efforts_by_team_element",
      "type": "highcharts",
      "source": "training_efforts_by_team_datasource",
      "sourceOptions": {
        "sql": "select * from inputTable i order by year_month"
      },
      "config": {
        "title": {
          "text": "Training efforts by team",
          "style": {}
        },
        "chart": {
          "type": "column"
        },
        "xAxis": {
          "title": {
            "text": "Month"
          }
        },
        "plotOptions": {
          "series": {
            "stacking": "normal",
            "dataLabels": {
              "enabled": true,
              "format": "{point.y:.2f} d"
            },
            "animation": true
          }
        },
        "yAxis": {
          "stackLabels": {
            "enabled": true,
            "format": "{total:.2f} d"
          },
          "title": {
            "text": "Number of open tickets"
          }
        },
        "tooltip": {
          "pointFormat": "{series.name}: {point.y:.2f}"
        }
      }
    }
  ],
  "pages": [],
  "endpoints": [],
  "syncSets": [],
  "partials": [],
  "customElementPacks": [],
  "customHooks": []
}
4

After some investigation with @johannesheininger it seems that not defining the series within the configuration causes the problem.

While this is an acceptable fix for some use cases, there are also some where it would be rather inconvenient to explicitly specify the series.

Do you know an alternative solution?

5

I believe I ran into the same issue. Were you able to solve the problem? If so, how did you do it? :slight_smile:

6

@anon84722980 Defining the series explicitly (which is only possible if the schema is known beforehand)

Or use the work-around from this post: Variable transformation: to json list

1 Like