Jumping to Different Web Pages in FVS

This document applies to users who have installed the FineVis Data Visualization plugin to learn FVS functions.

Version

Application Scenario

You can jump to a single web link or template in FVS by web link/pop-up box events. However, if you need to jump to different links based on different objects, JavaScript events are needed.

For example, you want to jump to different templates based on the chart series. The effect is shown in the following figure.

Implementation Method

Add a JavaScript click event to the component: Open a web link in a new window by JavaScript code.

The common JavaScript code is as follows:

Note:

The effects of the following code are opening web links in new tabs. If you need to open a web link on the current page, replace window.open with window.location.replace.

window.open("https://www.fanruan.com/");

window.open("http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt");

window.open("http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt&Area="+area);

if(series=='California') /*Determine that the series name is
  California
  .*/{var URL='/
  webroot/decision/view/report?
  viewlet
  =demo/basic/Aggregation Report.cpt
  '; window.open(encodeURI(encodeURI(URL))); //Open
  Aggregation Report.
  cpt in a new tab.}if(series=='New York') /*Determine that the series name is
  New York.*/{var URL='/webroot/decision/view/report?viewlet=demo/basic/Card Split.cpt'; window.open(encodeURI(encodeURI(URL))); //Open Card Split.cpt in a new tab.}

Creating a Template

Choose File > New FineVis Visualization Dashboard on the designer menu bar, customize the dashboard name and canvas size, and click Create Dashboard to create a blank dashboard, as shown in the following figure.

Data Preparation

Create a database query ds1 with the SQL statement Select * from Sales_Volume, as shown in the following figure.

Adding a Pie Chart Component

Choose Chart > Pie, and click Pie Chart to add a pie chart component to the page.

Select the component, choose Content > Data in the setting area, and set Dataset to ds1, Series to Region, and Value to Sales_Volume, as shown in the following figure.

Setting a JavaScript Event

Select the pie chart component, choose Interaction > Interaction Event, and choose Add Event > Click > JavaScript to add a JavaScript click event.

Set the event name to Jump to different templates.

In the Parameter Setting window, add a parameter area, and set Parameter Name to area, Parameter Type to Component Field, and Parameter Content to Series Name.

Enter the following JavaScript code.

if(area=='California') /*Determine that the series name is California.*/{var URL='http://localhost:8075/webroot/decision/view/report?viewlet=demo/basic/Aggregation Report.cpt'; window.open(encodeURI(encodeURI(URL))); //Open Aggregation Report.cpt in a new tab.}if(area=='New York') /*Determine that the series name is New York.*/{var URL='http://localhost:8075/webroot/decision/view/report?viewlet=demo/basic/Card Split.cpt'; window.open(encodeURI(encodeURI(URL))); //Open Card Split.cpt in a new tab.}

Effect Display

Save the template and click Preview in the upper right corner. Different sub-templates in new windows are opened based on the clicked series names of the pie chart.

Note:

The effect cannot be previewed on mobile terminals.

Download the completed template by clicking Jumping to Different Web Pages in FVS.fvs.