By continuing to use our website, you consent to the use of cookies. Please refer our cookie policy for more details.
    Grazitti Interactive Logo

      Marketo

      Dynamic Graphs in Marketo – A Success Story

      Apr 03, 2020

      3 minute read

      “Visualizations act as a campfire around which we gather to tell stories.” ― Al Shalloway.

      The attention span of a human is only eight seconds which is one second shorter than that of a goldfish! To grab the attention of their audience, brands use the storytelling power of data visualization to make it easier for users to connect with them.

      Our Marketo experts took this one step further to offer an intuitive and interactive solution to one of our customers. Read on.

      How it began

      One of our customers, a leading real estate brand, was using Marketo for their marketing operations. They wanted to make it easier for their users to understand complex data in Marketo. They contacted us to create dynamic graphs for them. They wanted the graphs to include:

      • region
      • number of bedrooms
      • price band
      • property type
      • square feet

      What the customer wanted was for the graph to automatically update as users made choices on the drop-downs and for the graph to have the X-axis of “House Price Index” and the Y-axis of “Year”.

      Graphs

      How we crafted the solution in Marketo

      After a thorough assessment of the requirements, we did some research on the implementation of charts in HTML and interactive designs for charts. We came across ‘Highcharts’ as the perfect fit for our customer’s needs. Here’s why:

      • Compatibility: Highcharts works seamlessly across all major browsers and mobile platforms like Android and iOS.
      • Multi-touch Support: It offers multi-touch support on touchscreen-based platforms like Android and iOS. It’s ideal for iPhone/iPad and Android-based smartphones/ tablets.
      • Free to use: It is open source and free to use for non-commercial purposes.
      • Lightweight: The highcharts.js core library with size nearly 35KB is an extremely lightweight library.
      • Simple Configurations: It uses JSON to define various configurations of the charts and is easy to learn and use.
      • Dynamic: It allows modifying the chart even after chart generation.
      • Multiple axes: It supports multiple axes on the charts, beyond the X and Y-axis.
      • Configurable tooltips: When a user hovers over any point on Highcharts, it provides an in-built tooltip or a callback formatter to control the tooltip programmatically.
      • Date/Time support: It provides numerous in-built controls over date-wise categories.
      • Export: It lets you easily export the chart to PDF/ PNG/JPG/SVG format by enabling the export feature.
      • Zoom ability: It supports the zoom functionality to get a more magnified view of the data.
      • External data: It supports loading data dynamically from the server and provides control over the data using the callback function.
      • Text Rotation: It supports the rotation of labels in any direction.

      Here are the details of every step we followed:

      1. Use of Highcharts: Highcharts is a pure JavaScript based charting library meant to enhance web applications by adding interactive charting capability. Highcharts provides a wide variety of charts and is customizable through options.

      2. Addition of required scripts and CSS files: We added the following scripts and CSS files:

      Script

      3. Chart development: We developed a static chart with static values using Highcharts with the required UI of the customer and incorporated dynamic data according to the customer’s requirement. We researched the values that we could read using JavaScript and then added the values to our chart.

      4. Complex value extraction and conversion: The customer wanted values extracted from the Excel files they had and what we needed was a JSON type file to serve this purpose. We worked on converting Excel files into the desired file type and successfully converted them into CSV files since they are easily readable by charts.

      Ultimately, we were able to change the values of charts, legends, and the data-type on the change of dropdown with reference to the customer’s Excel files. We uploaded the data seamlessly in Marketo and were able to access it, convert it from the link provided by Marketo, and display the output correctly.

      Our solution made it possible to encapsulate dynamic information easily so that end-users can explore the data for themselves.

      Adding interactive functionalities that capture attention while showcasing critical insights increases the effectiveness of the experience you want to create for your users and creating dynamic graphs in Marketo does just that.

      Do you wish to create dynamic graphs in Marketo for a better UX? Let’s talk!

      Talk to our Marketo experts to augment your Marketo operations. Drop us a line at info@grazitti.com and we’ll take it from there.

      What do you think?

      0 Like

      0 Love

      0 Wow

      0 Insightful

      1 Good Stuff

      0 Curious

      0 Dislike

      0 Boring

      Didn't find what you are looking for? Contact Us!