User Tools
This is an old revision of the document!
<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>
<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>
<graphviz border='frame' format='png' desc='none'> digraph example1 {Hello→“World!”} </graphviz>
Example 2 from http://www.mediawiki.org/wiki/Extension:GraphViz
<graphviz renderer='neato' caption='Hello Neato'> graph EXAMPLE2 {
run -- intr; intr -- runbl; runbl -- run; run -- kernel; kernel -- zombie; kernel -- sleep; kernel -- runmem; sleep -- swap; swap -- runswap; runswap -- new; runswap -- runmem; new -- runmem; sleep -- runmem;
} </graphviz>
<graphviz>
digraph L0 { size = “8,8”; ordering=out; node [shape = box];
n0 [label=“E”]; n1 [label=“T”]; n2 [label=“F”]; n3 [label=“IDENT : a ”]; n4 [label=“+”]; n5 [label=“T”]; n6 [label=“F”]; n7 [label=“(”]; n8 [label=“E”]; n9 [label=“T”]; n10 [label=“F”]; n11 [label=“IDENT : b ”]; n12 [label=“*”]; n13 [label=“F”]; n14 [label=“IDENT : c ”]; n15 [label=“)”]; n16 [label=“*”]; n17 [label=“F”]; n18 [label=“(”]; n19 [label=“E”]; n20 [label=“T”]; n21 [label=“F”]; n22 [label=“IDENT : d ”]; n23 [label=“*”]; n24 [label=“F”]; n25 [label=“IDENT : e ”]; n26 [label=“+”]; n27 [label=“T”]; n28 [label=“F”]; n29 [label=“(”]; n30 [label=“E”]; n31 [label=“T”]; n32 [label=“F”]; n33 [label=“IDENT : a ”]; n34 [label=“*”]; n35 [label=“F”]; n36 [label=“IDENT : b ”]; n37 [label=“)”]; n38 [label=“)”]; n39 [label=“+”]; n40 [label=“T”]; n41 [label=“F”]; n42 [label=“IDENT : q ”]; n0 →{ n1 n4 n5 n39 n40 }; n1 →n2 ; n2 →n3 ; n5 →{ n6 n16 n17 }; n6 →{ n7 n8 n15 }; n8 →n9 ; n9 →{ n10 n12 n13 }; n10 →n11 ; n13 →n14 ; n17 →{ n18 n19 n38 }; n19 →{ n20 n26 n27 }; n20 →{ n21 n23 n24 }; n21 →n22 ; n24 →n25 ; n27 →n28 ; n28 →{ n29 n30 n37 }; n30 →n31 ; n31 →{ n32 n34 n35 }; n32 →n33 ; n35 →n36 ; n40 →n41 ; n41 →n42 ; } </graphviz>
<graphviz>
digraph G {bgcolor=blue
subgraph cluster_1 { fontcolor=white
node [ style=filled,shape="box",fillcolor="antiquewhite:aquamarine" ]n5;
node [ shape="ellipse",fillcolor="bisque4:blue2" ]n4;
node [ shape="circle",fillcolor="cadetblue1:chocolate1" ]n3;
node [ shape="diamond",fillcolor="crimson:cyan4" ]n2;
node [ shape="triangle",fillcolor="deepskyblue2:firebrick" ]n1;
node [ shape="pentagon",fillcolor="gray24:gray88" ]n0;
label = "X11 Colors";
}
subgraph cluster_2 { fontcolor=white
node [ style=filled,shape="box",fillcolor="bisque:brown" ]n11;
node [ shape="ellipse",fillcolor="green:darkorchid" ]n10;
node [ shape="circle",fillcolor="deepskyblue:gold" ]n9;
node [ shape="diamond",fillcolor="lightseagreen:orangered" ]n8;
node [ shape="triangle",fillcolor="turquoise:salmon" ]n7;
node [ shape="pentagon",fillcolor="snow:black" ]n6;
label = "SVG Colors";
}
subgraph cluster_3 { fontcolor=white
node [ style=filled,shape="box",fillcolor="/accent3/1:/accent3/3" ]n17;
node [ shape="ellipse",fillcolor="/accent4/1:/accent4/4" ]n16;
node [ shape="circle",fillcolor="/accent5/1:/accent5/5" ]n15;
node [ shape="diamond",fillcolor="/accent6/1:/accent6/6" ]n14;
node [ shape="triangle",fillcolor="/accent7/1:/accent7/7" ]n13;
node [ shape="pentagon",fillcolor="/accent8/1:/accent8/8" ]n12;
label = "Brewer - accent";
}
subgraph cluster_4 { fontcolor=white
node [ style=filled,shape="box",fillcolor="/blues3/1:/blues3/2" ]n23;
node [ shape="ellipse",fillcolor="/blues4/1:/blues4/3" ]n22;
node [ shape="circle",fillcolor="/blues5/1:/blues5/4" ]n21;
node [ shape="diamond",fillcolor="/blues6/1:/blues6/5" ]n20;
node [ shape="triangle",fillcolor="/blues7/1:/blues7/6" ]n19;
node [ shape="pentagon",fillcolor="/blues8/1:/blues8/7" ]n18;
label = "Brewer - blues"; }
n3 → n9 → n15 → n21; } </graphviz>
<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>
