0

including google charts in Formulate ( custom visual )

how can i use google charts in formulate-custom visuals , 

I have a code for for a chart - (have attached  the code below) , how can I integrate it in FORMULATE_ CUSTOM VSUAL , to create a custom chart

 

CODE source link:
https://developers.google.com/chart/interactive/docs/gallery/orgchart

sample code :

<!DOCTYPE html>
<html>
<head>
  <title>Dynamic Organization Chart</title>
  <script type="text/javascript">
    function loadGoogleCharts() {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'https://www.gstatic.com/charts/loader.js';
      script.onload = function() {
        google.charts.load('current', {packages:["orgchart"]});
        google.charts.setOnLoadCallback(function() {
          drawChart([
            { name: 'Mike', title: 'President', age: 50 },
            { name: 'Jim', title: 'Vice President', manager: 'Mike', age: 45 },
            { name: 'Alice', title: 'Manager', manager: 'Mike', age: 30 },
            { name: 'Bob', title: 'Manager', manager: 'Jim', age: 35 },
            { name: 'Bobe', title: 'Manager', manager: 'Jim', age: 36 },
            { name: 'Carol', title: 'Assistant Manager', manager: 'Bob', age: 25 }
          ]);
        });
      };
      document.head.appendChild(script);
    }

function drawChart(data) {
      var dataTable = new google.visualization.DataTable();
      dataTable.addColumn('string', 'Name');
      dataTable.addColumn('string', 'Manager');
      dataTable.addColumn('string', 'ToolTip');

var rows = data.map(function(person) {
        var formattedName = person.name + '<div style="color:red; font-style:italic">' + person.title + '</div>';
        if (person.age) {
          formattedName += '<div>Age: ' + person.age + '</div>';
        }
        return [{ v: person.name, f: formattedName }, person.manager || '', person.title];
      });

dataTable.addRows(rows);

var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
      chart.draw(dataTable, { allowHtml: true });
    }

document.addEventListener('DOMContentLoaded', loadGoogleCharts);
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

 

sample output when I run the html file in browser 

3 replies

null
Login to reply

Content aside

  • Status Answered
  • 1 mth agoLast active
  • 3Replies
  • 53Views
  • 3 Following