Home / Resources / How To: Install and Use Click to Graph

How To: Install and Use Click to Graph

This article demonstrates how to install and use Click to Graph, a powerful way to add and remove pens from FactoryPMI's Easy Chart Component in runtime. Click to Graph allows you to add a right click menu to components, such as led displays, labels, numeric labels, etc, to add or remove that item from an Easy Chart graph dynamically. You can even save graphs and come back to them at later times. This way you choose what you want to see in a graph. Please read the instructions carefully and perform them in order.

Installing Click to Graph

Step 1: Download Click to Graph File
1) Click on the following link to download the zip file:
2) Extract the contents of the ctg.zip to a folder. This file contains 5 files:

ctg.sql - a MySQL backup file containing all the necessary tables
ctg.py - a python script that contains all the necessary functions
ctg.fpal - a custom palette that contains a few sample components
ctg.fwin - a file that contains all the necessary FactoryPMI windows
ctg_shutdown_script.txt - a file that contains the shutdown script needed

Step 2: Import MySQL Dump File
1) Open up Command Prompt by going to Start->Program Files->Accessories->Command Prompt

2) Change directory to MySQL bin by entering in (afterwards press enter):
cd "C:\Program Files\MySQL\MySQL Server 5.0\bin"

3) Now import ctg.sql by entering in (afterwards press enter):
mysql -u root -p YourDBName < "C:\Location to\ctg.sql"

4) Enter in your MySQL root password (afterwards press enter)

5) Done. The Click to Graph tables are now successfully imported.

Step 3: Import FactoryPMI Script Module
1) Open up the FactoryPMI Gateway Configuration page from: Start->Program Files->Inductive Automation->FactoryPMI->Configuration Page

2) Open up the FactoryPMI Designer by clicking on the Launch Designer link. Login with your username and password (default is admin and password). Select the project you want to use Click to Graph in.

3) Once open, go to Project->Script Modules from the menu bar.

4) Click on the Import a package or script button.



5) Select the ctg.py file.



6) Name the module ctg.



7) Done, you now have some global functions that we are going to use later. Press Ok to close.



Step 4: Import FactoryPMI Palette
1) With the designer still open, right click on the Component Palette and select Import Palette(s).



2) Select the ctg.fpal file.



7) Done, you now have some pre-configured components for Click to Graph that we can use.



Step 5: Import FactoryPMI Windows
1) With the designer still open, right click inside the Project Browser and select Import Window(s).



2) Select the ctg.fwin file.



7) Done, you now have some pre-configured windows for Click to Graph that we can use.



8) Lastly, you need to add the global shutdown script. Go to Project->Global Event Scripts. Next select the Shutdown tab and enter in the contents of the ctg_shutdown_script.txt. The script clears out the current graph when the user logs out or closes the client.



All done! Now let's go over how Click to Graph works.

How Click to Graph Works

The first part to understand is that Click to Graph stores pen configurations in the database. During the runtime each user picks and chooses from these pens. Picking and choosing these pens manipulates the ctg_active_client table. This table then drives the Easy Chart's pens/axes datasets dynamically. The ctg_active_client table is based on a unique Client ID created by FactoryPMI when you login to a client. This ID uniquely identifies one client from another. This way each client can have its own set of pens the user can configure. If that ID is somehow lost (possible via redirection), the user must log in again to access the graph.

Let's take a look at the databases tables needed for Click to Graph to work (there are 4 of them):

ctg_pens - table stores all possible pens for the graph.
ctg_axes - table stores all the available axes for the pens.
ctg_saved_pens - table stores the saved graphs.
ctg_active_client - table stores all the pens the clients have selected.

The ctg_pens table can be manipulated using the CTG_Pen_Edit window that we imported into our FactoryPMI project earlier. Here you can add/edit/remove pens. These pens correspond to tag or item that FactorySQL (or another historian) is already trending. Attached to a pen is a Point ID, which uniquely identifies one pen from another. Every FactoryPMI component that we want to use as a Click to Graph item must also contain the Point ID, so that it knows how to add or remove that specific pen. Let's go over a small example to get started.

Next, the actual Easy Chart, located on the CTG_Graph window, has two expert properties called pens and axes which are both bound to a SQL query. The pens dataset is bound to a join of the ctg_active_client table and the ctg_pens table. The axes dataset is bound to the ctg_axes table.

Let's go over a small example to understand how everything relates.

Example 1: Using a Click to Graph Component
1) Open up the FactoryPMI Designer.

2) Open up or create a window.

3) From the Component Palette under CTG Palette, drag and drop the Multi-State Indicator pre-configured component into the window.



4) You will notice there is a Dynamic Property called PointID attached to the component with a value of HOA. This Point ID must match the Point ID of a pen in the ctg_pens table.



5) Now, let's take a look at the Mouse Pressed and Released actions on this component. This is where the right click menu is called. So, right click on the component and select Configure Actions...



6) You will notice the script is the same for the mousePressed and mouseReleased. They both call a global script function that we imported earlier into the Script Modules. We pass the event object into the showPopup function and it knows how to retrieve the Point ID from the component. The function also takes care of creating the popup menu.



7) Now, cancel out of the action configuration and go into Preview mode in the designer by selecting Project->Preview mode from the menu. Now we can interact with the components. Right click on the indicator and you will get the following menu:



8) That's it! You can click (+) Add to Graph to add that pen to the current working graph. If the pen does not exist in the ctg_pens table the script will create one automatically with the default settings. After that, you can remove the pen and event clear out the current graph.

9) To see the current graph open up the CTG_Graph window.



How to add Click to Graph to already existing components

So, if you would like to add Click to Graph to already existing components do the following:

1) Right click on the component and select Component Customizers->Dynamic Properties and add a new property named PointID of type String.

2) Lastly, add the following script in the mousePressed and mouseReleased actions by right clicking on the component and selecting Configure Actions..:

if event.button != event.BUTTON1:
      app.ctg.showPopup(event)


Have fun with this goodie and as always if you have any questions please call us at 800.266.7798.
published: 04/30/14