Build a custom JavaScript viz

Step 1 – Add the widget

On the Storyboards toolbar, click Enable changes, and then click Add widget.

The Widgets pane appears.
Click the visualizations tab, and then click the Custom category.
Drag Custom to an empty cell in the page area.

The widget settings pane appears.

Step 2 – Select data

In the Data section, select a dataset, for example, Sample - World Sales.
In the Columns field, select the Department and Profit columns.

The order in which you add the columns is used in the visualization query.

Step 3 – Review the data structure

Before adding your custom code, load the visualization’s parameters and review the data structure.

In the Code & resources section, click Code Manager.
On the Custom JS tab, before adding the code, review the params object information.

The function draw(params) is called once before the renderer is used and the params object is passed.

Properties in the params object:
- container – The DOM div element.
- columns – An object that contains column metadata.
- data – An array with the dataset metadata.
- colors – An array with palette colors in hex format.
- formatValue – A built-in format value method.
Click Save on this tab.
Open the browser console, and then click Visualize to run console.log(params).
Review the params object for the visualization.

The ‘c1’ is the first column and ‘c2’ is the second column selected in the Columns field in the widget settings pane.

Step 4 – Add the code & external resources

The custom JavaSript code for this example is developed based on the charting library documentation and the built-in visualization data structure.

Go to Code Manager > Custom JS, copy & paste the following code into the editor:

Copy

function draw(params) {

console.log(params);

var data = processData(params);
console.log(data);

// Create root and chart
var root = am5.Root.new(params.container.id);

root.setThemes([
  am5themes_Animated.new(root),
am5themes_Responsive.new(root)
]);

var chart = root.container.children.push( 
  am5percent.PieChart.new(root, {
    radius: am5.percent(90),
    innerRadius: am5.percent(50),
layout: root.verticalLayout
  }) 
);

// Create series
var series = chart.series.push(
  am5percent.PieSeries.new(root, {
    name: "Series",
    categoryField: "name",
    valueField: "value",
  })
);

series.data.setAll(data);


// Add legend
var legend = chart.children.push(am5.Legend.new(root, {
    centerX: am5.percent(50),
  x: am5.percent(50),
    layout: root.horizontalLayout
}));

legend.data.setAll(series.dataItems);

}

//process data
function processData(params) {
    let metadata = params.data;
    let data = [];
    for(var i=0;i < metadata.length; i++) {
        data.push({
            name: metadata[i]["c1"],
            value: parseFloat(metadata[i]["c2"]),
        });
    }
    return data;
}

Under External resources, click Add new resource, add the following resources one by one:
- https://cdn.amcharts.com/lib/5/index.js
- https://cdn.amcharts.com/lib/5/percent.js
- https://cdn.amcharts.com/lib/5/themes/Animated.js
- https://cdn.amcharts.com/lib/5/themes/Responsive.js
Ensure the resource type is set to JS for each link, and then click Save.
Click Visualize.
Save the storyboard.

Step 5 – Apply the widget’s palette

Let’s say we want the chart to use the colors from the appearance tab. To do this, update the custom code to use colors from the params object.

Replace the custom code for the corresponding sections.

Copy

// Create series
var series = chart.series.push(
  am5percent.PieSeries.new(root, {
    name: "Series",
    categoryField: "name",
    valueField: "value",
    fillField: "color", //color
  })
);

series.data.setAll(data);

Copy

//process data
function processData(params) {
    let metadata = params.data;
    let data = [];
    for(var i=0;i < metadata.length; i++) {
        data.push({
            name: metadata[i]["c1"],
            value: parseFloat(metadata[i]["c2"]),
            color: am5.color(params.colors[i]), //color
        });
    }
    return data;
}

Click Save.
Click Visualize.

Now, the first default palette is applied to the chart. You can select or create any other palette on the appearance tab.
Save the storyboard.

Step 6 – Apply the widget’s value format

Let’s say we want to use the Profit value format (for example, $10M) selected on the data tab. Also, we want to display the custom column name in the tooltip.

Point to the Profit column, click Options, and then select Format. Select format as Currency and click OK.

For details, see Format dates & numbers.
Point to the Profit column, click Options, and then select Rename in this viz.

Enter Profit this year and click OK.

Replace the custom code for the corresponding sections.

Copy

// Create series
var series = chart.series.push(
  am5percent.PieSeries.new(root, {
    name: "Series",
    categoryField: "name",
    valueField: "value",
    fillField: "color", //color
    //in the tooltip, show a custom column name and the measure in the format from the widget
    tooltip: am5.Tooltip.new(root, {
      labelText:" "+ params.columns['c2'].vizDisplayName+ " ("+params.columns['c2'].aggregation+"): {valueFormat}"
   })
  })
);

series.data.setAll(data);

Copy

//process data
function processData(params) {
    let metadata = params.data;
    let data = [];
    for(var i=0;i < metadata.length; i++) {
        data.push({
            name: metadata[i]["c1"],
            value: parseFloat(metadata[i]["c2"]),
            valueFormat: params.formatValue(metadata[i]["c2"],params.columns['c2']), //the format for the measure
            color: am5.color(params.colors[i]) //color
        });
    }
    return data;
}

Click Save.
Click Visualize.

Now, the tooltip shows profit value in the specified format and the label uses a custom name.
Save the storyboard.

Step 7 – Change the CSS for chart text

Let’s say we want to use smaller font size for the chart labels.

On the Custom CSS tab, add the following code:
Copy
```
body {
  font-size: 12px;

}
```
Click Save.
Click Visualize.

All the labels use the specified font size.
Save the storyboard.

Build a custom JavaScript viz – Tutorial

Prerequisites