Google Charts
Google Charts Introduction Getting Started Area Charts Bar Charts Bubble Charts Calendar Charts Candlestick Charts Column Charts Combination Chart Gauge Chart Geo Charts Histogram Charts Line Charts Maps Organization Chart Pie Charts Sankey Charts Scatter Charts Stepped Area Charts Table Chart Trendline Charts Wordtree Charts

Google Word Tree Chart

A word tree depicts multiple parallel sequences of words.

It could be used to show which words most often follow or precede a target word or to show a hierarchy of terms.

A word tree chart is rendered within the browser using SVG or VML.

Like all Google charts, word tree charts display tooltips when the user hovers over the data.


Basic Word Tree Chart

The following example shows how to draw a basic word tree chart, using google charts API:


Example Explained

First add a <div> element with the id "chart-div" and set width and height:

<!DOCTYPE html> <html lang="en-US"> <body> <div id="chart-div" style="width:100%; height:350px;"></div> </body> </html>

Then add a reference to the Chart API:

<script src="https://www.gstatic.com/charts/loader.js"></script>

Finally add a JavaScript function:

// Load the wordtree package and set a callback google.charts.load('current', {'packages':['wordtree']}); google.charts.setOnLoadCallback(drawChart); // Callback that creates and populates a data table function drawChart() { // Create the data table var data = google.visualization.arrayToDataTable([ ['Phrases'], ['cats are better than dogs'], ['cats eat kibble'], ['cats are better than hamsters'], ['cats are awesome'], ['cats eat mice'], ['cats meowing'], ['cats in the cradle'], ['cats in the cradle lyrics'], ['cats for adoption'], ['cats are family'], ['cats are evil'], ]); // Set chart options var options = { wordtree: {format: 'implicit', word: 'cats'} }; // Display the chart inside the <div> element with id="chart-div" var chart = new google.visualization.WordTree(document.getElementById('chart-div')); chart.draw(data, options); }