How to translate Visualizer Graphs?

The Visualizer: Charts and Graphs becomes more accessible, by allowing you to manually create translations, through a dedicated plugin. In this documentation, we have presented how to translate Visualizer's elements.

First, make sure that you have installed and activated the WPML plugin. Configure the languages that you want for your website.

⚙️ Create the translated chart

2

Check the Translatable button next to the Visualizer Charts type.

Go to Visualizer > Charts Library and you will see the other configured language at the bottom of the charts. If you have already added a translated version for the chart when you hover on the language flag, you will see an edit (🖌 ) icon, otherwise, you will be able to add a translated version using the plus (➕) icon.

In the above example, the other language that we've chosen is Romanian ( see the Romanian flag ), but we have not prepared a translation yet. 

3

Click the ➕ button to add a translation for the chart, which will generate a new chart.

4

To edit the data, go to Manual Data, select one of the presented methods to edit it, and click on the Edit Data button.

5

After you finish translating the data, click on Create Chart. You will see again the Chart Library, with no changes to the chart that you have edited.

6

From the top menu bar, switch the default language to the translating one ( here: Romanian ), then you will see only the translated charts.

💡Display the translated chart

The translated chart is automatically rendered when you create a translation page. To display the chart, follow these steps:

1

Copy the shortcode of the chart, from Chart Library.

2

Paste it in a shortcode block, inside the editor, and publish the page.

3

Go back to Posts and next to the created post you will see the ➕ button, to add a translation, or a pencil, to edit an existing one.

4

This will open the editor, which allows you to create a translation for the page. Add the shortcode block again and paste the Visualizer Chart's shortcode.

Publish the page and check the results. You will notice that even if you have used the same chart shortcode, and the chart has the same ID, Visualizer automatically detects the language and it displays the translated chart.

💡Result

• English Page
• Romanian Page