3.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. <html><head>
  2. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  3. <script type="text/javascript" src="../js/json/json2.js"></script>
  4. <script type="text/javascript" src="../js/swfobject.js"></script>
  5. <script type="text/javascript">
  6. function ofc_ready()
  7. {
  8. alert('ofc_ready');
  9. //load();
  10. }
  11. function open_flash_chart_data()
  12. {
  13. alert( 'reading data' );
  14. return JSON.stringify(chart);
  15. }
  16. function load_1()
  17. {
  18. tmp = findSWF("my_chart");
  19. x = tmp.load( JSON.stringify(chart) );
  20. }
  21. function load_2()
  22. {
  23. tmp = findSWF("my_chart");
  24. x = tmp.load( JSON.stringify(chart2) );
  25. }
  26. function findSWF(movieName) {
  27. if (navigator.appName.indexOf("Microsoft")!= -1) {
  28. return window[movieName];
  29. } else {
  30. return document[movieName];
  31. }
  32. }
  33. var chart = {
  34. "title":{
  35. "text": "Many data lines",
  36. "style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"
  37. },
  38. "y_legend":{
  39. "text": "Open Flash Chart",
  40. "style": "{color: #736AFF; font-size: 12px;}"
  41. },
  42. "elements":[
  43. {
  44. "type": "bar",
  45. "alpha": 0.5,
  46. "colour": "#9933CC",
  47. "text": "Page views",
  48. "font-size": 10,
  49. "values" : [9,6,7,9,5,7,6,9,7]
  50. },
  51. {
  52. "type": "bar",
  53. "alpha": 0.5,
  54. "colour": "#CC9933",
  55. "text": "Page views 2",
  56. "font-size": 10,
  57. "values" : [6,7,9,5,7,6,9,7,3]
  58. }
  59. ],
  60. "x_axis":{
  61. "stroke":1,
  62. "tick_height":10,
  63. "colour":"#d000d0",
  64. "grid_colour":"#00ff00",
  65. "labels": ["January","February","March","April","May","June","July","August","Spetember"]
  66. },
  67. "y_axis":{
  68. "stroke": 4,
  69. "tick_length": 3,
  70. "colour": "#d000d0",
  71. "grid_colour": "#00ff00",
  72. "offset": 0,
  73. "max": 20
  74. }
  75. };
  76. var chart2 = {
  77. "title":{
  78. "text": "Sketch",
  79. "style": "{font-size:35px; color: #567300}"
  80. },
  81. "elements":[
  82. {
  83. "type": "bar_sketch",
  84. "colour": "#81AC00",
  85. "outline-colour": "#567300",
  86. "text": "Sketch",
  87. "font-size": 10,
  88. "offset": 6,
  89. "values" : [
  90. 3,
  91. 8,
  92. -5,
  93. {"top":5,"outline-colour": "#7030A0", "tip": "outline"},
  94. 4,
  95. {"top":5, "colour": "#99FF00", "tip": "colour"},
  96. {"top":-3,"colour": "#99FF00", "outline-colour": "#7030A0", "tip": "colour + outline"},
  97. 2,
  98. 7.5]
  99. }
  100. ],
  101. "x_axis":{
  102. "labels": ["January","February","March","April","May","June","July","August","Spetember"]
  103. },
  104. "y_axis":{
  105. "min": -10,
  106. "max": 10
  107. },
  108. "tooltip":{
  109. "text": "My Tip<br>#top#,#bottom# = #val#"
  110. }
  111. };
  112. alert( chart );
  113. </script>
  114. </head>
  115. <body>
  116. <div id="my_chart"></div>
  117. <script type="text/javascript">
  118. swfobject.embedSWF("../open-flash-chart/open-flash-chart.swf", "my_chart", "450", "300", "9.0.0");
  119. </script>
  120. <div>
  121. <INPUT TYPE=BUTTON OnClick="load_1();" VALUE="Chart 1">
  122. <INPUT TYPE=BUTTON OnClick="load_2();" VALUE="Chart 2">
  123. </div>
  124. </body>
  125. </html>