Dynamic Graphs in Marketo – A Success Story

“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”.

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:

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!