I try to add a html macro in confluence cloud. but failed.
Here's the code and it runs properly if saved it as html file.
<!DOCTYPE html>
<html lang="en">
<body>
<!-- WebDataRocks scripts -->
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<div id="wdr-component"></div>
<script>
var pivot = new WebDataRocks({
container: "#wdr-component",
height: 530,
toolbar: true,
report: {
dataSource: {
"dataSourceType": "csv",
"filename": "https://cdn.webdatarocks.com/data/data.csv"
},
"slice": {
"rows": [{
"uniqueName": "Country",
"filter": {
"members": [
"Country.United Kingdom",
"Country.United States"
],
"negation": true
}
},
{
"uniqueName": "Destination"
}
],
"columns": [{
"uniqueName": "Category"
},
{
"uniqueName": "Measures"
}
],
"measures": [{
"uniqueName": "Price",
"aggregation": "sum",
"format": "currency"
},
{
"uniqueName": "Discount",
"aggregation": "sum",
"format": "currency"
}
],
"expands": {
"rows": [{
"tuple": [
"Country.Australia"
]
}]
}
},
"conditions": [{
"formula": "#value > 350000",
"format": {
"backgroundColor": "#0598df",
"color": "#FFFFFF"
}
},
{
"formula": "AND(#value > 1000, #value < 3000)",
"format": {
"backgroundColor": "#f45328",
"color": "#FFFFFF"
}
}
],
options: {
grid: {
type: "classic"
}
}
}
});
</script>
</body>
</html>