Hi All,
I recently attend to an event of another BI Vendor. He demonstrate a way of utilizing an Infographic into its application. I thought "Humm perhaps it can be done in WEBI", so I started to experiment and come to this solution.
I´m using an image of the map of the states of USA and plotted the anual sales revenue of the stores in the states, accordingly to e-fashion universe.
![infographic1.png]()
As you can see, when a hoover the mouse over california, it shows me the value of sales revenue for that state for all years (note the filter on [Year] on the filter bar).
The Infographic is dynamic in the sense of clicking on a state, the report will be filtered by that state.
The idea here is to use a buble chart on the top of the image and plot a dummy Excel file with the correspondmig coordinates of the desired states in the picture.
I used a picture, downloaded from the we,b with 800 x 501 pixels of size.
The hardest part was to get the points (x, y) of each state inside the picture. When doing it yourself bear in mind that, usually , the coordinates of the Y axis in the pictures is taken form the top to bottom, while for charts it´s taken from bottom up.
This was the Excel file used in this sample.
![excel.png]()
The resulting buble chart on the top of the picture is shown in bellow picture
![infographic2.png]()
To star to build your dynamic InfoGraphic, the first thing to do is to find the image and save it on the local machine. Once it´s done, drop a blank cell onto your report.
Right click this cell and choose Format Cell-> Appearance and check Image from Filee, like below :
![cell format.png]()
Click on Upload. Set the hight and widht of the cell to accomodate the full picture.
Read your Excel file as personal data provider.
Create another query from the e-fashion Universe.That´s the query I use :![query.png]()
Execute both queries and merge them on State into Merged State.
Now, drop a bubble chart on the report, and assign it´s data like bellow
![assign data.png]()
Align your buble chart from the bottom left corner of the cell.
Adjust the maximu value of the AXIS scale in the chart to the size of the Picture (AXIS 1 to 800 and AXIS 2 to 501).
Now, set the background transparency of the chart to 0
![background.png]()
In Area Display unjcheck all visible information like below
![area display.png]()
See how the "bubles" in your chart are positioned on top of the image, correct the positioning in the x and y columns of your excel chart.
To finally hide the bubles themselves, go to Palette and Style , set the color to transparente and uncheck line symbol,
![pallete and style.png]()
Now, when hoover the mouse over any state that contains data, you should be abble to see the name of the State and its X, Y and Valor.
To add the actual Sales Revenue of each state, I create a detail variable ,[Sales State] = FormatNumber([Sales Revenue] In [Merged State];"US$ ##0,000.00"), and assigned it as below
![sales det.png]()
When you hoover the mouse, now you should be abble to see the value for the state as well.
Hope you liked it,
Regards,
Rogerio