<div id="myCustom" style="border: 5px dashed #ddd; padding: 20px; margin: 0 0 20px 0"></div>
<input type="button" value="Press me to re-load a random chart" id="reloadChart" disabled /><script type="application/json">{
"service": "charts",
"version": "2.0",
"renderTo": "myCustom",
"custom": "https://webtools.europa.eu/showcase-demo/resources/chartsapi/01_introduction/custom_script/custom_script.js"
}</script>
/**
* 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 => {
const getRandomInt = (max) => {
return Math.floor(Math.random() * max);
}
const generateRandomChart = () => {
let randomYear = 2000 + getRandomInt(10);
let chartTypes = ["column", "line", "area", "bar"];
let chartConfig = {
data: {
chart: {
type: chartTypes[getRandomInt(3)]
},
title: {
text: "Random chart generated using a custom script"
},
credits: {
enabled: false
},
xAxis: {
categories: [randomYear, randomYear + 1, randomYear + 2]
},
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.data);
}
// Bind function to a button.
let reloadButton = document.querySelector("#reloadChart");
reloadButton.disabled = false;
reloadButton.addEventListener("click", generateRandomChart, false);
generateRandomChart();
});
This example demonstrates how to load a chart that is Javascript driven using a custom script (parameter custom).