NovoRoi Systems DokuWiki

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>

<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>

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>

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>