Subversion Repositories php-qbpwcf

Rev

Rev 23 | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
23 liveuser 1 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 
<html>
3 
 
4 
  <head>
5 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
7 
    <title>amCharts Data Loader Example</title>
8 
    <script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
9 
    <script src="http://www.amcharts.com/lib/3/serial.js"></script>
10 
    <script src="http://www.amcharts.com/lib/3/themes/dark.js"></script>
11 
    <script src="../dataloader.min.js"></script>
12 
    <style>
13 
    body, html {
14 
      font-family: Verdana;
15 
      font-size: 12px;
16 
      background-color:#282828;
17 
    }
18 
    #chartdiv {
19 
      width: 100%;
20 
      height: 500px;
21 
    }
22 
    </style>
23 
    <script>
24 
      var chart = AmCharts.makeChart("chartdiv", {
25 
        "type": "serial",
26 
        "theme": "dark",
27 
        "dataLoader": {
28 
          "url": "data/serial2.json",
29 
          "showErrors": true,
30 
          "complete": function ( chart ) {
31 
            console.log( "Loading complete" );
32 
          },
33 
          "load": function ( options, chart ) {
34 
            console.log( "File loaded: ", options.url );
35 
          },
36 
          "error": function ( options, chart ) {
37 
            console.log( "Error occured loading file: ", options.url );
38 
          }
39 
        },
40 
        "categoryField": "year",
41 
        "startDuration": 1,
42 
        "rotate": true,
43 
        "categoryAxis": {
44 
          "gridPosition": "start"
45 
        },
46 
        "valueAxes": [{
47 
          "position": "top",
48 
          "title": "Million USD",
49 
          "minorGridEnabled": true
50 
        }],
51 
        "graphs": [{
52 
          "type": "column",
53 
          "title": "Income",
54 
          "valueField": "income",
55 
          "fillAlphas":1,
56 
          "balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>"
57 
        }, {
58 
          "type": "line",
59 
          "title": "Expenses",
60 
          "valueField": "expenses",
61 
          "lineThickness": 2,
62 
          "bullet": "round",
63 
          "balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>"
64 
        }],
65 
        "legend": {
66 
          "useGraphSettings": true
67 
        },
68 
        "creditsPosition": "top-right",
69 
        "responsive": {
70 
          "enabled": true
71 
        }
72 
      });
73 
 
74 
      function reloadData() {
75 
        chart.dataLoader.loadData();
76 
      }
77 
    </script>
78 
  </head>
79 
 
80 
  <body>
81 
    <div id="chartdiv"></div>
82 
    <input type="button" value="Trigger data reload" onclick="reloadData();" />
83 
  </body>
84 
 
85 
</html>