iModernize - The Profound Logic Software Blog

Profound Pro Tips: Creating Interactive Charts with Profound UI

Posted by Tim Losee on Sep 26, 2017 11:44:00 AM

Profound Pro Tips is a blog series that is focused on reoccurring customer issues that our support team receives and aims to answer questions our Profound Logic customers might have before they even have them! Many of our customers have similar questions and concerns which lead us to create Profound Pro Tips... an easy to reference set of reoccurring questions you might have. Don't see your question/concern in Profound Pro Tips? Please feel free to submit a support ticket and our amazing support team will be happy to help any way they can or leave us a comment below and we will pass it along to our support team.

This week we are discussing how you can take your existing charts and make them more interactive within Profound UI's Visual Designer tool... 

I am sure that many of you have already found and are using the chart feature within our Profound UI Visual Designer Tool. But did you know that you are able to take your charts to a whole new level by making them interactive? By taking static charts and making them more interactive, you are able to create a depth to your data that you can't have with your typical green screen. 

For our example today we are going to talk about a quarterly sales chart. If the chart was a static chart we would only see the sales for the 4 quarters of the year, and that might be enough, but what if you want to dig deeper into those quarterly charts and get the sales for each of the months within that quarter? That is where a dynamic chart would be very useful! 

When first setting up your charts you will want to make sure that you are using the names and values properties and bind them to fields in your program. In this case it would be the total budget per quarter and the quarter that budget represents. You can use a comma separated list if you need to for the names and values properties. This is nothing new to Profound UI users, but then how do you make those static charts interactive?

Through the 'chart response' property that is in the lower right hand side of the visual design tool. You can bound the 'chart response' property to a field (in our case we will bind it to a field named quarter) which will be populated with the name of the data point on the chart that the user clicked on. In our example, when the user clicks on the field named 'quarter,' control is going to return to our RPG program and process another chart that will give a month to month sales break down within the quarter they clicked on. Thus creating multiple interactive charts for you to show more in-depth data on your web based browser. 

Chart options is another feature you may not know about. This allows you to do many different things with your charts including; number rounding, number scaling, captions, titles and various things that make your charts more dynamic and interactive. Included in the chart options section is a link to see a list of all the options for your chart. For our quarterly sales example, you can use it to put captions on your charts, access titles and add a currency symbol to help show the total sales in US dollars. 

Hopefully this quick tip on chart response and chart options will help you take your charts to the next level in your modernization effort. These options give your data the look and feel of being in a true Web design and will allow your users easier access to said data. To see this in video form please head over to our Youtube channel and watch the video on Creating Interactive Charts in Profound UI. 


November 15th-17th Profound Logic will be hosting our 2nd annual PLUS Seminar for their customers. Get the most value from your Profound Logic investment and assure your modernization success. Register here today!

One of our focuses for 2017 is the continued adoption of Node.js in IBM i shops. Click here to read our white paper on Why Node.js Is The Solution Your Company Needs.

Also, Profound.js 2.0 has been released! See how Profound.js 2.0 can help modernize your IBM i today!


 

Topics: Node.js, Profound.js, IBM i applications, IBM i, RPG Development, RPG, Application modernization, AS400 modernization, IBM i Modernization, Agile modernization, Profound UI, iSeries, AS 400, AS_400, Profound Logic, Legacy Modernization

Subscribe to Blog Updates

...and get the The Node.js for Enterprise
IBM i Modernization White Paper!

Node.js cover page option 2-1.png

Recent Posts