How to display charts with Thrive Architect

If you want to insert charts in Thrive Architect (and you are not afraid of code), Google has tools allowing to create dynamic charts.


Here's an example

Here's the code you can use and modify into a custom html element in Thrive Architect.


<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          [' ',  ' '],
          ['Idea', 1,       ],
          ['Confirmation',     2,         ],
          ['Creation',        3,         ],
          ['First Client',      4,        ],
         ['First 10 Clients',      5,        ],  
          ['First 100 Clients',      6,        ]
        ]);

        var options = {
          title: '',
          vAxis: {title: 'Steps'},
          isStacked: true
        };

        var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }
    </script><div id="chart_div" style="width: 900px; height: 500px;"></div>

Here are some other visual charts you can build using the same method.

Here's a list of charts you can build.

Line chart
Combo chart
Area chart  
Column chart  
Bar chart
Pie chart  
Scatter chart  
Histogram
Candlestick chart  
Organizational  
Tree map chart
Geo
Waterfall
Radar
Gauges
Annotated timeline
Table

Alternatives

There is another tool called JuiceAnalytics that offer data visualization and embedding.