including google charts in Formulate ( custom visual )
![](https://s3-us-west-2.amazonaws.com/media.forumbee.com/i/5b0074e5-2352-4e66-9cb9-74dc1090ee10/h/547.png)
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
-
Hi ,
To get started, watch the video on building custom visuals from our Help page, then work your way through the example given.
Note that Pyramid provides a framework to handle dynamic data and features such as chart trellising through its Custom Visual API.
Also, open the examples in the marketplace, to see how to implement other chart types with other 3rd party libraries.
Hope that helps.
Ian
-
Hi
In addition to the above resources, there is an article on Custom visuals in our community forum here.
https://community.pyramidanalytics.com/t/60yym70/how-to-add-a-custom-visual
as well as a Learning live session covering the topic here
https://community.pyramidanalytics.com/t/60yya3r/learning-live-creating-custom-visuals
hope you find these useful,
Mark
-
Thanks a lot, , We will check the resources you have mentioned, conduct a few tests and trials, and keep you updated.