json-test.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <html><head>
  2. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  3. <script type="text/javascript" src="../js/swfobject.js"></script>
  4. <script type="text/javascript" src="../js/json/json2.js"></script>
  5. <script type="text/javascript">
  6. function ofc_ready()
  7. {
  8. alert('ofc_ready');
  9. // tmp = findSWF("ofc");
  10. // x = tmp.load( JSON.stringify(data) );
  11. }
  12. function open_flash_chart_data()
  13. {
  14. alert( 'reading data' );
  15. return JSON.stringify(data);
  16. }
  17. function load()
  18. {
  19. tmp = findSWF("ofc");
  20. x = tmp.load( JSON.stringify(data_2) );
  21. }
  22. function findSWF(movieName) {
  23. if (navigator.appName.indexOf("Microsoft")!= -1) {
  24. return window[movieName];
  25. } else {
  26. return document[movieName];
  27. }
  28. }
  29. var data = {
  30. "title_":{
  31. "text":"Custom tooltip",
  32. "style":"{font-size: 20px; font-family: Verdana; text-align: center;}"
  33. },
  34. "elements":[
  35. {
  36. "type": "bar",
  37. "colour": "#9933CC",
  38. "text": "Page views",
  39. "font-size": 10,
  40. "values" : [9,6,7,9,5,7,6,9,9]
  41. }
  42. ],
  43. "x_axis":{
  44. "labels": ["January","February","March","April","May","June","July","August","Spetember"]
  45. },
  46. "y_axis":{
  47. "max":20
  48. },
  49. "tooltip":{
  50. "shadow":false,
  51. "stroke":5,
  52. "colour":"#00d000",
  53. "background":"#d0d0ff",
  54. "title":"{font-size: 14px; color: #905050;}",
  55. "body":"{font-size: 10px; font-weight: bold; color: #9090ff;}"
  56. }
  57. }
  58. var data_2 = {
  59. "title":{
  60. "text": "Many data lines",
  61. "style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"
  62. },
  63. "y_legend":{
  64. "text": "Open Flash Chart",
  65. "style": "{color: #736AFF; font-size: 12px;}"
  66. },
  67. "elements":[
  68. {
  69. "type": "bar",
  70. "alpha": 0.5,
  71. "colour": "#9933CC",
  72. "text": "Page views",
  73. "font-size": 10,
  74. "values" : [9,6,7,9,5,7,6,9,7]
  75. },
  76. {
  77. "type": "bar",
  78. "alpha": 0.5,
  79. "colour": "#CC9933",
  80. "text": "Page views 2",
  81. "font-size": 10,
  82. "values" : [9,6,7,9,5,7,6,9,7]
  83. }
  84. ],
  85. "x_axis":{
  86. "stroke":1,
  87. "tick_height":10,
  88. "colour":"#d000d0",
  89. "grid_colour":"#00ff00",
  90. "labels": ["January","February","March","April","May","June","July","August","Spetember"]
  91. },
  92. "y_axis":{
  93. "stroke": 4,
  94. "tick_length": 3,
  95. "colour": "#d000d0",
  96. "grid_colour": "#00ff00",
  97. "offset": 0,
  98. "max": 20
  99. }
  100. }
  101. </script>
  102. </head>
  103. <body>
  104. <div id="my_chart"></div>
  105. <script type="text/javascript">
  106. var so = new SWFObject("../open-flash-chart/open-flash-chart.swf?p=moo", "ofc", "300", "250", "9", "#FFFFFF");
  107. so.addParam("allowScriptAccess", "always" );//"sameDomain");
  108. so.write("my_chart");
  109. </script>
  110. <a href="javascript:load()">load json</a>
  111. </body>
  112. </html>