--- title: "Profound Pro Tips: Creating Interactive Charts with Profound UI" description: Profound Pro Tips is a blog series that is focused on reoccurring customer issues that our support team receives. image: https://blog.profoundlogic.com/hubfs/41505050_l-1.jpg --- [![(877) 224-7768 <>](https://no-cache.hubspot.com/cta/default/1708946/5d9809e1-1922-4e3e-b06b-d359616d29bd.png)](https://cta-redirect.hubspot.com/cta/redirect/1708946/5d9809e1-1922-4e3e-b06b-d359616d29bd) [![sales@profoundlogic.com ](https://no-cache.hubspot.com/cta/default/1708946/4fc30eb7-f66d-4552-81e2-49cc209a5ead.png)](https://cta-redirect.hubspot.com/cta/redirect/1708946/4fc30eb7-f66d-4552-81e2-49cc209a5ead) [![Share on facebook](https://7528309.fs1.hubspotusercontent-na1.net/hub/7528309/hubfs/raw_assets/public/mV0_d-web-default-modules_hubspot/img/facebook-color.png?width=24&name=facebook-color.png)](https://www.facebook.com/share.php?u=https%3A%2F%2Fblog.profoundlogic.com%2Fprofound-pro-tips-creating-interactive-charts-with-profound-ui%3Futm_medium%3Dsocial%26utm_source%3Dfacebook) [![Share on twitter](https://7528304.fs1.hubspotusercontent-na1.net/hub/7528304/hubfs/raw_assets/public/mV0_d-web-default-modules_hubspot/img/twitter-color.png?width=24&name=twitter-color.png)](https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Fblog.profoundlogic.com%2Fprofound-pro-tips-creating-interactive-charts-with-profound-ui%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&url=https%3A%2F%2Fblog.profoundlogic.com%2Fprofound-pro-tips-creating-interactive-charts-with-profound-ui%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&source=tweetbutton&text=) [![Profound Logic](https://blog.profoundlogic.com/hs-fs/hubfs/PLS_Logo.jpg?width=150&height=52&name=PLS_Logo.jpg "Profound Logic")](https://www.profoundlogic.com/) - AI-Enhanced Products - [Profound AI](https://www.profoundlogic.com/ai/) - [Profound UI](https://www.profoundlogic.com/profoundui/) - [Profound.js](https://www.profoundlogic.com/profoundjs/) - [Profound API](https://www.profoundlogic.com/api/) - Services - Futurization and Transformation - [Profound 360 Analysis](https://www.profoundlogic.com/services/profound-360-analysis/) - [Flexible IBM i Code Transformation](https://www.profoundlogic.com/services/flexible-code-transformation/) - [IBM i UX Modernization Service](https://www.profoundlogic.com/services/ibm-i-ux-modernization-service/) - [Database Modernization](https://www.profoundlogic.com/services/database-modernization/) - Integration & API Development - [System Integration](https://www.profoundlogic.com/services/systems-integration/) - [Cloud Migration Services](https://www.profoundlogic.com/services/cloud-migration-services/) - [Rapid Application Development](https://www.profoundlogic.com/services/application-development/) - [Application Development](https://www.profoundlogic.com/services/application-development/) - [Mobile Application Development](https://www.profoundlogic.com/services/mobile-application-development/) - [Company](https://www.profoundlogic.com/about-profound-logic/) - [About Us](https://www.profoundlogic.com/about-profound-logic/) - [Press Releases](https://www.profoundlogic.com/press-releases/) - [Careers](https://www.profoundlogic.com/careers/) - [Contact Us](https://www.profoundlogic.com/contact/) - Resources - [Blog](https://www.profoundlogic.com/blog/) - [Case Studies](https://www.profoundlogic.com/case-studies/) - [On-Demand Webinars](https://www.profoundlogic.com/webinars/) - [White Papers](https://www.profoundlogic.com/white-papers/) - [Product Documentation](https://profoundlogicsupport.atlassian.net/wiki/spaces/PUI/overview) - [User Forum](https://forum.profoundlogic.com/) - [Contact Support](https://profoundlogicsupport.atlassian.net/servicedesk/customer/portal/1) [![Contact Us](https://no-cache.hubspot.com/cta/default/1708946/interactive-172756632938.png)](https://blog.profoundlogic.com/hs/cta/wi/redirect?encryptedPayload=AVxigLLHXo7QIAyTKuswvOYGuAv6OHr%2BCJVQlAckJxZbNmT8b6Uo%2FJxDbUhoZ3oskH1u5%2BHWxhuzOH60GjC4BUpYfUcXRZRhCC9IwGCgl55BNdwtG2OqNFElAzc162W3bQUy9H2BEjIX3Fb5c5vyiLUBOzWnUCo97NKoB3snfVyLCMWQUnN9KK2NET5y&webInteractiveContentId=172756632938&portalId=1708946) # iModernize - The Profound Logic Software Blog # Profound Pro Tips: Creating Interactive Charts with Profound UI Posted by [Tim Losee](https://blog.profoundlogic.com/author/tim-losee) on Sep 26, 2017 11:44:00 AM - [Tweet](https://twitter.com/share) --- 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](https://www.youtube.com/channel/UCNWJ3sF_CULJeglL6fptD0w?view_as=subscriber) and watch the video on [Creating Interactive Charts in Profound UI. ](https://youtu.be/-ELe6yBrnJA) --- *November 15th-17th Profound Logic will be hosting our 2nd annual [PLUS Seminar](https://info.profoundlogic.com/plus2017) for their customers. Get the most value from your Profound Logic investment and assure your modernization success. [Register here today](https://info.profoundlogic.com/plus2017)!* *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**](https://info.profoundlogic.com/node).* *Also, [Profound.js 2.0](https://info.profoundlogic.com/introducing-profound-js-2-0?utm_campaign=Profound.js%202.0&utm_source=Home%20Page%20Banner) has been released! See how Profound.js 2.0 can help modernize your IBM i today!* ---   Topics: [RPG Development](https://blog.profoundlogic.com/topic/rpg-development), [Application modernization](https://blog.profoundlogic.com/topic/application-modernization), [IBM i applications](https://blog.profoundlogic.com/topic/ibm-i-applications), [Node.js](https://blog.profoundlogic.com/topic/node-js), [Profound.js](https://blog.profoundlogic.com/topic/profound-js), [IBM i](https://blog.profoundlogic.com/topic/ibm-i), [RPG](https://blog.profoundlogic.com/topic/rpg), [AS400 modernization](https://blog.profoundlogic.com/topic/as400-modernization), [IBM i Modernization](https://blog.profoundlogic.com/topic/ibm-i-modernization), [Agile modernization](https://blog.profoundlogic.com/topic/agile-modernization), [iSeries](https://blog.profoundlogic.com/topic/iseries), [Legacy Modernization](https://blog.profoundlogic.com/topic/legacy-modernization), [Profound UI](https://blog.profoundlogic.com/topic/profound-ui), [AS 400](https://blog.profoundlogic.com/topic/as-400), [AS\_400](https://blog.profoundlogic.com/topic/as_400), [Profound Logic](https://blog.profoundlogic.com/topic/profound-logic) Search Blog ### 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](https://blog.profoundlogic.com/hs-fs/hubfs/Node.js%20cover%20page%20option%202-1.png?width=541&name=Node.js%20cover%20page%20option%202-1.png "Node.js cover page option 2-1.png") ### Recent Posts ### Posts by Topic - [Events & Education (203)](https://blog.profoundlogic.com/topic/events-education) - [Application modernization (173)](https://blog.profoundlogic.com/topic/application-modernization) - [IBM i Modernization (169)](https://blog.profoundlogic.com/topic/ibm-i-modernization) - [IBM i applications (169)](https://blog.profoundlogic.com/topic/ibm-i-applications) - [Profound.js (165)](https://blog.profoundlogic.com/topic/profound-js) - [Node.js (164)](https://blog.profoundlogic.com/topic/node-js) - [Agile modernization (162)](https://blog.profoundlogic.com/topic/agile-modernization) - [IBM i (161)](https://blog.profoundlogic.com/topic/ibm-i) - [RPG (158)](https://blog.profoundlogic.com/topic/rpg) - [AS400 modernization (157)](https://blog.profoundlogic.com/topic/as400-modernization) - [iSeries (149)](https://blog.profoundlogic.com/topic/iseries) - [Legacy Modernization (141)](https://blog.profoundlogic.com/topic/legacy-modernization) - [RPG Development (85)](https://blog.profoundlogic.com/topic/rpg-development) - [AS 400 (58)](https://blog.profoundlogic.com/topic/as-400) - [Profound UI (54)](https://blog.profoundlogic.com/topic/profound-ui) - [Profound Logic (50)](https://blog.profoundlogic.com/topic/profound-logic) - [AS\_400 (49)](https://blog.profoundlogic.com/topic/as_400) - [New Features (28)](https://blog.profoundlogic.com/topic/new-features) - [Tips and Tricks (26)](https://blog.profoundlogic.com/topic/tips-and-tricks) - [Development (20)](https://blog.profoundlogic.com/topic/development) - [green screen modernization (15)](https://blog.profoundlogic.com/topic/green-screen-modernization) - [Mobile Development (14)](https://blog.profoundlogic.com/topic/mobile-development-2) - [5250 (12)](https://blog.profoundlogic.com/topic/5250) - [IBM Watson (10)](https://blog.profoundlogic.com/topic/ibm-watson) - [Press Release (9)](https://blog.profoundlogic.com/topic/press-release) - [Product Announcement (9)](https://blog.profoundlogic.com/topic/product-announcement) - [Scott Klement Health (7)](https://blog.profoundlogic.com/topic/scott-klement-health) - [Partnerships (6)](https://blog.profoundlogic.com/topic/partnerships) - [PLUS 2018 (5)](https://blog.profoundlogic.com/topic/plus-2018) - [Prime UI (5)](https://blog.profoundlogic.com/topic/prime-ui) - [Case Study (4)](https://blog.profoundlogic.com/topic/case-study) - [Enterprise Modernization (3)](https://blog.profoundlogic.com/topic/enterprise-modernization) - [Year in review (3)](https://blog.profoundlogic.com/topic/year-in-review) - [PLUS 2019 (2)](https://blog.profoundlogic.com/topic/plus-2019) - [mobile applications (2)](https://blog.profoundlogic.com/topic/mobile-applications) - [mobile mondernization (2)](https://blog.profoundlogic.com/topic/mobile-mondernization) - [2016 Survey (1)](https://blog.profoundlogic.com/topic/2016-survey) - [2019 Survey (1)](https://blog.profoundlogic.com/topic/2019-survey) - [Conversion Service (1)](https://blog.profoundlogic.com/topic/conversion-service) - [Model 3 (1)](https://blog.profoundlogic.com/topic/model-3) - [Tesla (1)](https://blog.profoundlogic.com/topic/tesla) - [connectria (1)](https://blog.profoundlogic.com/topic/connectria) - [node (1)](https://blog.profoundlogic.com/topic/node) see all ### Archive - [September 2014 (17)](https://blog.profoundlogic.com/archive/2014/09) - [March 2017 (14)](https://blog.profoundlogic.com/archive/2017/03) - [May 2017 (10)](https://blog.profoundlogic.com/archive/2017/05) - [April 2019 (10)](https://blog.profoundlogic.com/archive/2019/04) - [May 2019 (10)](https://blog.profoundlogic.com/archive/2019/05) - [February 2013 (9)](https://blog.profoundlogic.com/archive/2013/02) - [June 2017 (9)](https://blog.profoundlogic.com/archive/2017/06) - [August 2017 (9)](https://blog.profoundlogic.com/archive/2017/08) - [September 2017 (9)](https://blog.profoundlogic.com/archive/2017/09) - [October 2017 (9)](https://blog.profoundlogic.com/archive/2017/10) - [July 2017 (8)](https://blog.profoundlogic.com/archive/2017/07) - [June 2018 (8)](https://blog.profoundlogic.com/archive/2018/06) - [January 2019 (8)](https://blog.profoundlogic.com/archive/2019/01) - [March 2019 (8)](https://blog.profoundlogic.com/archive/2019/03) - [June 2019 (8)](https://blog.profoundlogic.com/archive/2019/06) - [August 2014 (7)](https://blog.profoundlogic.com/archive/2014/08) - [August 2015 (7)](https://blog.profoundlogic.com/archive/2015/08) - [December 2017 (7)](https://blog.profoundlogic.com/archive/2017/12) - [January 2018 (7)](https://blog.profoundlogic.com/archive/2018/01) - [July 2018 (7)](https://blog.profoundlogic.com/archive/2018/07) - [August 2018 (7)](https://blog.profoundlogic.com/archive/2018/08) - [October 2018 (7)](https://blog.profoundlogic.com/archive/2018/10) - [June 2014 (6)](https://blog.profoundlogic.com/archive/2014/06) - [October 2014 (6)](https://blog.profoundlogic.com/archive/2014/10) - [September 2015 (6)](https://blog.profoundlogic.com/archive/2015/09) - [April 2017 (6)](https://blog.profoundlogic.com/archive/2017/04) - [November 2017 (6)](https://blog.profoundlogic.com/archive/2017/11) - [March 2018 (6)](https://blog.profoundlogic.com/archive/2018/03) - [November 2018 (6)](https://blog.profoundlogic.com/archive/2018/11) - [December 2018 (6)](https://blog.profoundlogic.com/archive/2018/12) - [February 2019 (6)](https://blog.profoundlogic.com/archive/2019/02) - [January 2014 (5)](https://blog.profoundlogic.com/archive/2014/01) - [April 2014 (5)](https://blog.profoundlogic.com/archive/2014/04) - [October 2015 (5)](https://blog.profoundlogic.com/archive/2015/10) - [February 2018 (5)](https://blog.profoundlogic.com/archive/2018/02) - [April 2018 (5)](https://blog.profoundlogic.com/archive/2018/04) - [July 2020 (5)](https://blog.profoundlogic.com/archive/2020/07) - [January 2013 (4)](https://blog.profoundlogic.com/archive/2013/01) - [March 2013 (4)](https://blog.profoundlogic.com/archive/2013/03) - [April 2013 (4)](https://blog.profoundlogic.com/archive/2013/04) - [July 2014 (4)](https://blog.profoundlogic.com/archive/2014/07) - [May 2018 (4)](https://blog.profoundlogic.com/archive/2018/05) - [September 2018 (4)](https://blog.profoundlogic.com/archive/2018/09) - [July 2019 (4)](https://blog.profoundlogic.com/archive/2019/07) - [September 2013 (3)](https://blog.profoundlogic.com/archive/2013/09) - [March 2014 (3)](https://blog.profoundlogic.com/archive/2014/03) - [July 2015 (3)](https://blog.profoundlogic.com/archive/2015/07) - [November 2015 (3)](https://blog.profoundlogic.com/archive/2015/11) - [January 2016 (3)](https://blog.profoundlogic.com/archive/2016/01) - [March 2016 (3)](https://blog.profoundlogic.com/archive/2016/03) - [April 2016 (3)](https://blog.profoundlogic.com/archive/2016/04) - [September 2016 (3)](https://blog.profoundlogic.com/archive/2016/09) - [October 2019 (3)](https://blog.profoundlogic.com/archive/2019/10) - [June 2020 (3)](https://blog.profoundlogic.com/archive/2020/06) - [August 2020 (3)](https://blog.profoundlogic.com/archive/2020/08) - [November 2013 (2)](https://blog.profoundlogic.com/archive/2013/11) - [February 2014 (2)](https://blog.profoundlogic.com/archive/2014/02) - [May 2014 (2)](https://blog.profoundlogic.com/archive/2014/05) - [November 2014 (2)](https://blog.profoundlogic.com/archive/2014/11) - [January 2015 (2)](https://blog.profoundlogic.com/archive/2015/01) - [April 2015 (2)](https://blog.profoundlogic.com/archive/2015/04) - [February 2016 (2)](https://blog.profoundlogic.com/archive/2016/02) - [June 2016 (2)](https://blog.profoundlogic.com/archive/2016/06) - [July 2016 (2)](https://blog.profoundlogic.com/archive/2016/07) - [October 2016 (2)](https://blog.profoundlogic.com/archive/2016/10) - [December 2016 (2)](https://blog.profoundlogic.com/archive/2016/12) - [February 2017 (2)](https://blog.profoundlogic.com/archive/2017/02) - [March 2020 (2)](https://blog.profoundlogic.com/archive/2020/03) - [April 2020 (2)](https://blog.profoundlogic.com/archive/2020/04) - [May 2020 (2)](https://blog.profoundlogic.com/archive/2020/05) - [September 2020 (2)](https://blog.profoundlogic.com/archive/2020/09) - [October 2020 (2)](https://blog.profoundlogic.com/archive/2020/10) - [January 2021 (2)](https://blog.profoundlogic.com/archive/2021/01) - [November 2012 (1)](https://blog.profoundlogic.com/archive/2012/11) - [December 2012 (1)](https://blog.profoundlogic.com/archive/2012/12) - [May 2013 (1)](https://blog.profoundlogic.com/archive/2013/05) - [June 2013 (1)](https://blog.profoundlogic.com/archive/2013/06) - [July 2013 (1)](https://blog.profoundlogic.com/archive/2013/07) - [August 2013 (1)](https://blog.profoundlogic.com/archive/2013/08) - [October 2013 (1)](https://blog.profoundlogic.com/archive/2013/10) - [December 2013 (1)](https://blog.profoundlogic.com/archive/2013/12) - [December 2014 (1)](https://blog.profoundlogic.com/archive/2014/12) - [March 2015 (1)](https://blog.profoundlogic.com/archive/2015/03) - [May 2015 (1)](https://blog.profoundlogic.com/archive/2015/05) - [May 2016 (1)](https://blog.profoundlogic.com/archive/2016/05) - [November 2016 (1)](https://blog.profoundlogic.com/archive/2016/11) - [January 2017 (1)](https://blog.profoundlogic.com/archive/2017/01) - [August 2019 (1)](https://blog.profoundlogic.com/archive/2019/08) - [December 2019 (1)](https://blog.profoundlogic.com/archive/2019/12) - [November 2020 (1)](https://blog.profoundlogic.com/archive/2020/11) - [December 2020 (1)](https://blog.profoundlogic.com/archive/2020/12) see all #### Related Resources - [\[fa icon="caret-right"\] Benefits of Modernizing Legacy Systems](https://www.profoundlogic.com/benefits-of-modernizing-legacy-systems/) - [\[fa icon="caret-right"\] Customer Satisfaction and Supply Chains](https://www.profoundlogic.com/customer-satisfaction-and-supply-chains/) - [\[fa icon="caret-right"\] Why Your Business Must Modernize Its Legacy Applications](https://www.profoundlogic.com/why-your-business-must-modernize-its-legacy-applications/) - \[fa icon="caret-right"\] Coding in 2021 and Beyond: Is Node.js Dead? #### Recommended for you - [\[fa icon="caret-right"\] The Importance of API Security to Protect Sensitive Business Data](https://info.profoundlogic.com/the-importance-of-api-security-to-protect-sensitive-business-data) - [\[fa icon="caret-right"\] Why API Matters for Enterprise Development](https://info.profoundlogic.com/why-api-matters-for-business-development-whitepaper) - [\[fa icon="caret-right"\] The Cost of Technical Debt to Business on IBM i](https://info.profoundlogic.com/technical-debt) - [\[fa icon="caret-right"\] Node.js for Enterprise IBM i Modernization](https://info.profoundlogic.com/node) #### Watch now on demand - [\[fa icon="caret-right"\] What is Code Transformation?](https://info.profoundlogic.com/code-transformation-stage-one) - [\[fa icon="caret-right"\] Transform IBM i/AS400 Now](https://www.profoundlogic.com/transform-ibm-i-as400-now/) - [\[fa icon="caret-right"\] Profound API, Low-Code and Product Updates Announced at PLUS 2020](https://info.profoundlogic.com/plus2020) - [\[fa icon="caret-right"\] IBM i Transformation Risks Every Business Leader Should Know](https://info.profoundlogic.com/transformation-risks-wod) #### Company - [\[fa icon="caret-right"\] About Us](https://www.profoundlogic.com/about-profound-logic/) - [\[fa icon="caret-right"\] Press Releases](https://www.profoundlogic.com/press-releases/) - [\[fa icon="caret-right"\] Events and Webinars](https://www.profoundlogic.com/events/) - [\[fa icon="caret-right"\] Careers](https://www.profoundlogic.com/careers/) - [\[fa icon="caret-right"\] Partnerships](https://www.profoundlogic.com/partnerships/) - [\[fa icon="caret-right"\] Contact Us](https://www.profoundlogic.com/contact/) [Sign up for our newsletter](https://www.profoundlogic.com/newsletter-signup-profound-logic/) | [Developers](https://docs.profoundlogic.com/) | [Blog](https://www.profoundlogic.com/blog/) | [Privacy](https://www.profoundlogic.com/privacy-policy) | [Contact](https://www.profoundlogic.com/contact/) | [1-877-224-7768](tel:877-224-7768) Copyright © 2026 Profound Logic Software | [Sitemap](https://www.profoundlogic.com/sitemap.xml) \[fa icon="chevron-up"\] ![](https://www.facebook.com/tr?id=237478240316292&ev=PageView&noscript=1)