Creating A Bar Graph Tutorial

See how to use various features of Noventri Suite.
Post Reply

Creating A Bar Graph Tutorial

Post by Martin-Noventri »

Hello All,

This tutorial walks through how to create a databased linked bar graph in Noventri Suite

Source files: Download Here


To view video from a mobile device, click here.

Transcript - Using Noventri Suite and databased image regions, it is possible to create bar graphs, pie charts, gauges and more, to update automatically by pulling information from a database. This is a great way for helping your audience visualize data and to stay current with metrics pertinent to them.

In this tutorial we will demonstrate how to make a simple bar graph. Before starting, you should have a good working knowledge of Noventri Suite and databased regions. To get up to speed, we have database driven content tutorials that are available on the Noventri website. We encourage you to look at these if needed.

We also have provided a link to the source files used in this tutorial. And that can be found in the description of this video. Please download the files and follow the installation instructions, as these will be needed to follow along with our video.

Once you have installed the source files, open Noventri Suite, browse to and open the Single Bar graph project. In the Design tab you will notice we have a completed graph page. We are going to refresh our database connections. So we can do that through keyboard shortcut Control R or you can go up to the Edit menu and click Refresh All Database. This graph is showing the percent of the production goal achieved based on the number of current widgets made. So the goal is 300 widgets and they have already made 150, for a percentage of 50%. All of the data is being pulled from the Noventri Bar Graph excel sheet which is in the C: Noventri /graphs folder.
Lets open the template page. Here we see the same data but we will still need to create the bar graph.

First we need to create a databased image region that will display the images of our graph. So lets drag out an image region the approximate size for the graph. In the region properties, name the region Bar Container. So to have our bar graph update based on information from the excel sheet, there are 2 steps we need to do to making this happen. First, the region will need connected to the excel sheet, so that it can return the percentage number. And second, the region will need to be associated with the folder that contains our graph images. So the percentage number that we pull from the excel sheet will correspond to the name of an image file in the Orange_Bar_Images folder, and then that image will display in the region. So since the percentage that we’re pulling is 50%, then our region will look for a 50.png image and then show that image.
So back in the region properties, we are going to check the Databased image check box. Go to the Advanced tab and select the ODBC button. Now we can link the region to our database.

So click the connect button and then manually select the appropriate driver for excel and then browse to the file location of the excel sheet and click Connect. Now in this instance, there is another way to achieve this database connectivity. Since the Text regions on the page are connected to the same database, we can Match Database regions so that we can apply database settings from one region to another. So to do this, we will close out our box, now in the file menu we are going to go to edit, and then choose Match database regions. In the Source Region box, we are going to choose a region which already has the database connection set up. We are going to choose as a destination region the Bar Container region. This will copy the database settings from one region and apply it to our Bar Container region.

Now to make sure that the connection has been set up successfully, click the Select button and then we are going to refresh the view of the select statement area. So notice, not only are we pulling in information from the excel sheet, but we are also manipulating the information to show in a format that we can use on our page. And we are doing this through a select statement. Notice that the date is in the desired format and that we have all numbers showing as whole numbers. Now the column we need to take note of is Percentage. We’ll be pulling from this column In order to get the graph image name.

So our next step is to associate our image region with the folder where the graph images live. Click OK to close out this box. Now with the Bar container region still selected, click on the image tab. Now we are going to browse to the folder Orange Bar Images, that should be in the C: Noventri /graphs folder. And we are going to just select one of the graph bar images. You will notice that they are named from 1 to 100 to correspond with each percentage that we would have. So lets select 15.

Now it’s obvious we’re going to need to scale that image to fit the size of our region. So to do that, we’re going to uncheck Preserve Aspect Ratio. Now we still need to make the image path relatable to the Percentage column from our database. And we are going to do that with a formatter. So here in our file location and we are going to remove the 15 from in front of the .png and we are going to replace that with a formatter. Which will be [ and we wanted to show row number 1, then a : and we are going to be pulling in from the Percentage column, and then ] And so now our bar graph is going to show 50% because it is pulling in that 50.png image and displaying that based off the information we have in our excel sheet. Now to make sure this is all working correctly, open the Noventri Bar Graph excel sheet and make a change to some of our data. So you see here, we have some cells marked in yellow and these are able to be changed. So edit the Actual column, and change that to 250. Now back in Noventri Suite, we’re going to refresh our database connections. And when we do that, we see that our bar graph is updated to reflect the data changes.

Well congratulations. You have just created your first graph using databased regions in Noventri Suite. To learn more about databased content or to contact us about our graph creation services, visit us at and request more information. While you are there, visit the Noventri Tutorials page to stay up to date with our latest videos.
Post Reply