This is an old revision of the document!
<html>
<head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body> <!--Div that will hold the pie chart--> <div id="chart_div"></div> </body>
</html> <html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages:['wordtree']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(
[ ['Phrases'],
['cats are better than dogs'],
['cats eat kibble'],
['cats are better than hamsters'],
['cats are awesome'],
['cats are people too'],
['cats eat mice'],
['cats meowing'],
['cats in the cradle'],
['cats eat mice'],
['cats in the cradle lyrics'],
['cats eat kibble'],
['cats for adoption'],
['cats are family'],
['cats eat mice'],
['cats are better than kittens'],
['cats are evil'],
['cats are weird'],
['cats eat mice'],
]
);
var options = {
wordtree: {
format: 'implicit',
word: 'cats'
}
};
var chart = new google.visualization.WordTree(document.getElementById('wordtree_basic'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="wordtree_basic" style="width: 900px; height: 500px;"></div>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
// For each orgchart box, provide the name, manager, and tooltip to show.
data.addRows([
[{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'},
'', 'The President'],
[{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},
'Mike', 'VP'],
['Alice', 'Mike', ''],
['Bob', 'Jim', 'Bob Sponge'],
['Carol', 'Bob', '']
]);
// Create the chart.
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
// Draw the chart, setting the allowHtml option to true for the tooltips.
chart.draw(data, {allowHtml:true});
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
<graphviz dot left 900×500> digraph ATN { rankdir=LR; s25[fontsize=11, label=“25”, shape=doublecircle, fixedsize=true, width=.6]; s239[fontsize=24,label=“239”, shape=circle, fixedsize=true, width=.55, peripheries=1]; s240[fontsize=11,label=“240”, shape=circle, fixedsize=true, width=.55, peripheries=1]; s241[fontsize=11,label=“241”, shape=circle, fixedsize=true, width=.55, peripheries=1]; s242[fontsize=11,label=“242”, shape=circle, fixedsize=true, width=.55, peripheries=1]; s243[fontsize=11,label=“{→\n243\nd=24|{<p0>|<p1>}}”, shape=record, fixedsize=false, peripheries=1]; s244[fontsize=11,label=“←\n244”, shape=circle, fixedsize=true, width=.55, peripheries=1]; s245[fontsize=11,label=“245”, shape=circle, fixedsize=true, width=.55, peripheries=1]; s246[fontsize=11,label=“246”, shape=circle, fixedsize=true, width=.55, peripheries=1]; s247[fontsize=11,label=“→\n247+”, shape=circle, fixedsize=true, width=.55, peripheries=1]; s24[fontsize=11,label=“24”, shape=circle, fixedsize=true, width=.55, peripheries=1]; s248[fontsize=11,label=“←\n248”, shape=circle, fixedsize=true, width=.55, peripheries=1]; s249[fontsize=11,label=“{249+\nd=25|{<p0>|<p1>}}”, shape=record, fixedsize=false, peripheries=1]; s250[fontsize=11,label=“250”, shape=circle, fixedsize=true, width=.55, peripheries=1]; s251[fontsize=11,label=“251”, shape=circle, fixedsize=true, width=.55, peripheries=1]; s252[fontsize=11,label=“252”, shape=circle, fixedsize=true, width=.55, peripheries=1]; s24 → s239 [fontname=“Times-Italic”, label=“ε”]; s239 → s247 [fontsize=11, fontname=“Courier”, arrowsize=.7, label = “'{'”, arrowhead = normal]; s247 → s240 [fontname=“Times-Italic”, label=“ε”]; s240 → s243 [fontsize=11, fontname=“Courier”, arrowsize=.7, label = “'case'”, arrowhead = normal]; s243:p0 → s241 [fontname=“Times-Italic”, label=“ε”]; s243:p1 → s242 [fontname=“Times-Italic”, label=“ε”]; s241 → s244 [fontsize=11, fontname=“Courier”, arrowsize=.7, label = “'null'”, arrowhead = normal]; s242 → s244 [fontsize=11, fontname=“Courier”, arrowsize=.7, label = “<element>”, arrowhead = normal]; s244 → s245 [fontname=“Times-Italic”, label=“ε”]; s245 → s246 [fontsize=11, fontname=“Courier”, arrowsize=.7, label = “'⇒'”, arrowhead = normal]; s246 → s248 [fontsize=11, fontname=“Courier”, arrowsize=.7, label = “<block>”, arrowhead = normal]; s248 → s249 [fontname=“Times-Italic”, label=“ε”]; s249:p0 → s247 [fontname=“Times-Italic”, label=“ε”, style=“dashed”]; s249:p1 → s250 [fontname=“Times-Italic”, label=“ε”]; s250 → s251 [fontname=“Times-Italic”, label=“ε”]; s251 → s252 [fontsize=11, fontname=“Courier”, arrowsize=.7, label = “'}'”, arrowhead = normal]; s252 → s25 [fontname=“Times-Italic”, label=“ε”]; } </graphviz>