aapssfc/book/modules/luther/sphinx/animation/chart.html
2015-03-03 15:56:44 +01:00

51 lines
No EOL
1.4 KiB
HTML

<html>
<head>
<title>charts</title>
<!-- <script type="text/javascript" src="https://www.google.com/jsapi"></script> -->
<!-- <script type="text/javascript" src="chart.js"></script> -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="jqchart/jquery.gchart.js"></script>
<script type="text/javascript" src="jqchart/jquery.gchart.graphviz.js"></script>
<style>
#visualization { width: 800px; height: 400px; }
</style>
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
// $("#visualization").gchart({type: 'graphviz', series: [$.gchart.series([20, 50, 30])]});
// label: '<f0> left | <f1> middle | <f2> right'
$('#visualization').gchart($.gchart.graphviz(true,
{
struct1: {label: '<f0> left |<f1> middle |<f2> right'},
struct2: {label: '<f0> one|<f1> two'},
struct3: {label: 'hello\nworld |{ b |{c|<here> d|e}| f}| g | h'}
},
{
'struct1:f1': ['struct2:f0'],
'struct2:f2': ['struct3:here']
},
{
node: {shape: 'record'}
}
));
// $('#visualization').gchart($.gchart.graphviz(true,
// {struct1: {label: "<f0> left |<f1> middle |<f2> right"},
// struct2: {label: "<f0> one|<f1> two"},
// struct3: {label: "hello\ world |{ b |{c|<here> d|e}| f}| g | h"}
// },
// {'struct1:f1': ['struct2:f0'],
// 'struct2:f2': ['struct3:here']},
// {node: {shape: 'record'}}))
</script>
</body>
</html>