| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152 |
- <html><head>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <script type="text/javascript" src="../js/json/json2.js"></script>
- <script type="text/javascript" src="../js/swfobject.js"></script>
- <script type="text/javascript">
- function ofc_ready()
- {
- alert('ofc_ready');
- //load();
- }
- function open_flash_chart_data()
- {
- alert( 'reading data' );
- return JSON.stringify(chart);
- }
- function load_1()
- {
- tmp = findSWF("my_chart");
- x = tmp.load( JSON.stringify(chart) );
- }
- function load_2()
- {
- tmp = findSWF("my_chart");
- x = tmp.load( JSON.stringify(chart2) );
- }
- function findSWF(movieName) {
- if (navigator.appName.indexOf("Microsoft")!= -1) {
- return window[movieName];
- } else {
- return document[movieName];
- }
- }
- var chart = {
- "title":{
- "text": "Many data lines",
- "style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"
- },
-
- "y_legend":{
- "text": "Open Flash Chart",
- "style": "{color: #736AFF; font-size: 12px;}"
- },
-
- "elements":[
- {
- "type": "bar",
- "alpha": 0.5,
- "colour": "#9933CC",
- "text": "Page views",
- "font-size": 10,
- "values" : [9,6,7,9,5,7,6,9,7]
- },
- {
- "type": "bar",
- "alpha": 0.5,
- "colour": "#CC9933",
- "text": "Page views 2",
- "font-size": 10,
- "values" : [6,7,9,5,7,6,9,7,3]
- }
- ],
-
- "x_axis":{
- "stroke":1,
- "tick_height":10,
- "colour":"#d000d0",
- "grid_colour":"#00ff00",
- "labels": ["January","February","March","April","May","June","July","August","Spetember"]
- },
-
- "y_axis":{
- "stroke": 4,
- "tick_length": 3,
- "colour": "#d000d0",
- "grid_colour": "#00ff00",
- "offset": 0,
- "max": 20
- }
- };
-
-
- var chart2 = {
- "title":{
- "text": "Sketch",
- "style": "{font-size:35px; color: #567300}"
- },
- "elements":[
- {
- "type": "bar_sketch",
- "colour": "#81AC00",
- "outline-colour": "#567300",
- "text": "Sketch",
- "font-size": 10,
- "offset": 6,
- "values" : [
- 3,
- 8,
- -5,
- {"top":5,"outline-colour": "#7030A0", "tip": "outline"},
- 4,
- {"top":5, "colour": "#99FF00", "tip": "colour"},
- {"top":-3,"colour": "#99FF00", "outline-colour": "#7030A0", "tip": "colour + outline"},
- 2,
- 7.5]
- }
- ],
- "x_axis":{
- "labels": ["January","February","March","April","May","June","July","August","Spetember"]
- },
- "y_axis":{
- "min": -10,
- "max": 10
- },
- "tooltip":{
- "text": "My Tip<br>#top#,#bottom# = #val#"
- }
- };
- alert( chart );
- </script>
- </head>
- <body>
-
- <div id="my_chart"></div>
-
- <script type="text/javascript">
- swfobject.embedSWF("../open-flash-chart/open-flash-chart.swf", "my_chart", "450", "300", "9.0.0");
- </script>
-
- <div>
- <INPUT TYPE=BUTTON OnClick="load_1();" VALUE="Chart 1">
- <INPUT TYPE=BUTTON OnClick="load_2();" VALUE="Chart 2">
- </div>
- </body>
- </html>
|