Subversion Repositories php-qbpwcf

Rev

Rev 23 | 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">
        <link href='http://fonts.googleapis.com/css?family=Covered+By+Your+Grace' rel='stylesheet' type='text/css'>
        <script src="../amcharts/amcharts.js" type="text/javascript"></script>
        <script src="../amcharts/serial.js" type="text/javascript"></script>
        <script src="../amcharts/pie.js" type="text/javascript"></script>
        <!-- theme files. you only need to include the theme you use.
             feel free to modify themes and create your own themes -->
        <script src="../amcharts/themes/light.js" type="text/javascript"></script>
        <script src="../amcharts/themes/dark.js" type="text/javascript"></script>
        <script src="../amcharts/themes/black.js" type="text/javascript"></script>
        <script src="../amcharts/themes/chalk.js" type="text/javascript"></script>
        <script src="../amcharts/themes/patterns.js" type="text/javascript"></script>
        <script>
        // in order to set theme for a chart, all you need to include theme file
        // located in amcharts/themes folder and set theme property for the chart.

        var chart1;
        var chart2;

        makeCharts("light", "#FFFFFF");

        // Theme can only be applied when creating chart instance - this means
        // that if you need to change theme at run time, youhave to create whole
        // chart object once again.

        function makeCharts(theme, bgColor, bgImage) {

            if (chart1) {
                chart1.clear();
            }
            if (chart2) {
                chart2.clear();
            }

            // background
            if (document.body) {
                document.body.style.backgroundColor = bgColor;
                document.body.style.backgroundImage = "url(" + bgImage + ")";
            }

            // column chart
            chart1 = AmCharts.makeChart("chartdiv1", {
                type: "serial",
                theme: theme,
                dataProvider: [{
                    "year": 2005,
                    "income": 23.5,
                    "expenses": 18.1
                }, {
                    "year": 2006,
                    "income": 26.2,
                    "expenses": 22.8
                }, {
                    "year": 2007,
                    "income": 30.1,
                    "expenses": 23.9
                }, {
                    "year": 2008,
                    "income": 29.5,
                    "expenses": 25.1
                }, {
                    "year": 2009,
                    "income": 24.6,
                    "expenses": 25
                }],
                categoryField: "year",
                startDuration: 1,

                categoryAxis: {
                    gridPosition: "start"
                },
                valueAxes: [{
                    title: "Million USD"
                }],
                graphs: [{
                    type: "column",
                    title: "Income",
                    valueField: "income",
                    lineAlpha: 0,
                    fillAlphas: 0.8,
                    balloonText: "[[title]] in [[category]]:<b>[[value]]</b>"
                }, {
                    type: "line",
                    title: "Expenses",
                    valueField: "expenses",
                    lineThickness: 2,
                    fillAlphas: 0,
                    bullet: "round",
                    balloonText: "[[title]] in [[category]]:<b>[[value]]</b>"
                }],
                legend: {
                    useGraphSettings: true
                }

            });

            // pie chart
            chart2 = AmCharts.makeChart("chartdiv2", {
                type: "pie",
                theme: theme,
                dataProvider: [{
                    "country": "Czech Republic",
                    "litres": 156.9
                }, {
                    "country": "Ireland",
                    "litres": 131.1
                }, {
                    "country": "Germany",
                    "litres": 115.8
                }, {
                    "country": "Australia",
                    "litres": 109.9
                }, {
                    "country": "Austria",
                    "litres": 108.3
                }, {
                    "country": "UK",
                    "litres": 65
                }, {
                    "country": "Belgium",
                    "litres": 50
                }],
                titleField: "country",
                valueField: "litres",
                balloonText: "[[title]]<br><b>[[value]]</b> ([[percents]]%)",
                legend: {
                    align: "center",
                    markerType: "circle"
                }
            });

        }


        </script>
    </head>

    <body style="font-size:15px;">Select theme:
        <a href="#" onclick="makeCharts('light', '#ffffff');">Light</a> |
        <a href="#" onclick="makeCharts('dark', '#282828')">Dark</a> |
        <a href="#" onclick="makeCharts('black', '#222222')">Black</a> |
        <a href="#" onclick="makeCharts('patterns', '#ffffff')">Patterns</a> |
        <a href="#" onclick="makeCharts('chalk', '#282828', 'images/board.jpg')">Chalk</a>
        <div id="chartdiv1" style="width: 600px; height: 400px;"></div>
        <div id="chartdiv2" style="width: 600px; height: 400px;"></div>
    </body>

</html>