Subversion Repositories qbpwcf-lib(archive)

Rev

Rev 915 | Blame | Compare with Previous | Last modification | View Log | RSS feed 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amCharts examples</title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="../amcharts/amcharts.js" type="text/javascript"></script>
        <script src="../amcharts/serial.js" type="text/javascript"></script>
        <script>

            // this chart is exactly the same as in areaStacked.html, only made using JSON except JavaScript API

            var chartData = [{
               "year": 2000,
                   "cars": 1587,
                   "motorcycles": 650,
                   "bicycles": 121
           }, {
               "year": 1995,
                   "cars": 1567,
                   "motorcycles": 683,
                   "bicycles": 146
           }, {
               "year": 1996,
                   "cars": 1617,
                   "motorcycles": 691,
                   "bicycles": 138
           }, {
               "year": 1997,
                   "cars": 1630,
                   "motorcycles": 642,
                   "bicycles": 127
           }, {
               "year": 1998,
                   "cars": 1660,
                   "motorcycles": 699,
                   "bicycles": 105
           }, {
               "year": 1999,
                   "cars": 1683,
                   "motorcycles": 721,
                   "bicycles": 109
           }, {
               "year": 2000,
                   "cars": 1691,
                   "motorcycles": 737,
                   "bicycles": 112
           }, {
               "year": 2001,
                   "cars": 1298,
                   "motorcycles": 680,
                   "bicycles": 101
           }, {
               "year": 2002,
                   "cars": 1275,
                   "motorcycles": 664,
                   "bicycles": 97
           }, {
               "year": 2003,
                   "cars": 1246,
                   "motorcycles": 648,
                   "bicycles": 93
           }, {
               "year": 2004,
                   "cars": 1218,
                   "motorcycles": 637,
                   "bicycles": 101
           }, {
               "year": 2005,
                   "cars": 1213,
                   "motorcycles": 633,
                   "bicycles": 87
           }, {
               "year": 2006,
                   "cars": 1199,
                   "motorcycles": 621,
                   "bicycles": 79
           }, {
               "year": 2007,
                   "cars": 1110,
                   "motorcycles": 210,
                   "bicycles": 81
           }, {
               "year": 2008,
                   "cars": 1165,
                   "motorcycles": 232,
                   "bicycles": 75
           }, {
               "year": 2009,
                   "cars": 1145,
                   "motorcycles": 219,
                   "bicycles": 88
           }, {
               "year": 2010,
                   "cars": 1163,
                   "motorcycles": 201,
                   "bicycles": 82
           }, {
               "year": 2011,
                   "cars": 1180,
                   "motorcycles": 285,
                   "bicycles": 87
           }, {
               "year": 2012,
                   "cars": 1159,
                   "motorcycles": 277,
                   "bicycles": 71
           }];

           AmCharts.makeChart("chartdiv", {
               type: "serial",
               dataProvider: chartData,
               marginTop: 10,
               categoryField: "year",
               categoryAxis: {
                   gridAlpha: 0.07,
                   axisColor: "#DADADA",
                   startOnAxis: true,
                   guides: [{
                       category: "2001",
                       lineColor: "#CC0000",
                       lineAlpha: 1,
                       dashLength: 2,
                       inside: true,
                       labelRotation: 90,
                       label: "fines for speeding increased"
                   }, {
                       category: "2007",
                       lineColor: "#CC0000",
                       lineAlpha: 1,
                       dashLength: 2,
                       inside: true,
                       labelRotation: 90,
                       label: "motorcycle maintenance fee introduced"
                   }]
               },
               valueAxes: [{
                   stackType: "regular",
                   gridAlpha: 0.07,
                   title: "Traffic incidents"
               }],

               graphs: [{
                   type: "line",
                   title: "Cars",
                   hidden: true,
                   valueField: "cars",
                   lineAlpha: 0,
                   fillAlphas: 0.6,
                   balloonText: "<img src='images/car.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>"
               }, {
                   type: "line",
                   title: "Motorcycles",
                   valueField: "motorcycles",
                   lineAlpha: 0,
                   fillAlphas: 0.6,
                   balloonText: "<img src='images/motorcycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>"
               }, {
                   type: "line",
                   title: "Bicycles",
                   valueField: "bicycles",
                   lineAlpha: 0,
                   fillAlphas: 0.6,
                   balloonText: "<img src='images/bicycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>"
               }],
               legend: {
                   position: "bottom",
                   valueText: "[[value]]",
                   valueWidth: 100,
                   valueAlign: "left",
                   equalWidths: false,
                   periodValueText: "total: [[value.sum]]"
               },
               chartCursor: {
                   cursorAlpha: 0
               },
               chartScrollbar: {
                   color: "FFFFFF"
               }

           });

        </script>
    </head>

    <body>
        <div id="chartdiv" style="width:100%; height:400px;"></div>
    </body>

</html>