Webtools showcase

/**
 *  THE BEST IMPLEMENTATION SHOULD BE:
 *
 *  // Render empty charts.
 *  $wt.charts.render().ready(instance => {
 *
 *    // Get any information based on UEC.
 *    let path = instance.getUEC("path");
 *
 *    // ... You can also manage the UI based on the instance.
 *    let chartContainer = instance.ui;
 *
 *    // Build your charts config based on highcharts.
 *    let config = { ... }
 *
 *    // Populate the current charts instance.
 *    instance.refresh(config);
 *
 *  });
 *
 */

$wt.charts.render().ready(instance => {

  // Utils.
  const getRandomInt = (max) => Math.floor(Math.random() * max);

  // Random a chart's type with random value.
  const generateRandomChart = () => {

    // References.
    let randomYear = 2000 + getRandomInt(10);
    let chartConfig = {

      // Random charts type.
      chart: {
        type: ["column", "line", "area", "bar"][getRandomInt(3)]
      },

      // NEW 2025: Custom translation using your local dictionary.
      title: {
        text: instance.label('title', {
          fallback: "Random chart generated using a custom script"
        })
      },

      // Random xAxis label.
      xAxis: {
        categories: [randomYear, randomYear + 1, randomYear + 2]
      },

      // Random datat series.
      series: [
        {name: "Serie 1", data: [getRandomInt(10), getRandomInt(10), getRandomInt(10)]},
        {name: "Serie 2", data: [getRandomInt(10), getRandomInt(10), getRandomInt(10)]}
      ]

    };

    // Is always faster to refresh/update the current instance
    // compare to reflow the whole process by using $wt.charts.render
    instance.refresh(chartConfig);

  };

  // Bind function to a button.
  let reloadButton = document.querySelector("#reloadChart");
  reloadButton.disabled = false;
  reloadButton.addEventListener("click", generateRandomChart, false);

  generateRandomChart();

});