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>amStock Example</title>
                <link rel="stylesheet" href="../amcharts/style.css" type="text/css">

                <script src="../amcharts/amcharts.js" type="text/javascript"></script>
                <script src="../amcharts/serial.js" type="text/javascript"></script>
                <script src="../amcharts/amstock.js" type="text/javascript"></script>

                <script>
                        var chartData = generateChartData();

                        function generateChartData() {
                                var chartData = [];
                                var firstDate = new Date(2012, 0, 1);
                                firstDate.setDate(firstDate.getDate() - 1000);
                                firstDate.setHours(0, 0, 0, 0);

                                for (var i = 0; i < 1000; i++) {
                                        var newDate = new Date(firstDate);
                                        newDate.setHours(0, i, 0, 0);

                                        var a = Math.round(Math.random() * (40 + i)) + 100 + i;
                                        var b = Math.round(Math.random() * 100000000);

                                        chartData.push({
                                                date: newDate,
                                                value: a,
                                                volume: b
                                        });
                                }
                                return chartData;
                        }

                        var chart = AmCharts.makeChart("chartdiv", {

                                        type: "stock",

                                        categoryAxesSettings: {
                                                minPeriod: "mm"
                                        },

                                        dataSets: [{
                                                color: "#b0de09",
                                                fieldMappings: [{
                                                        fromField: "value",
                                                        toField: "value"
                                                }, {
                                                        fromField: "volume",
                                                        toField: "volume"
                                                }],

                                                dataProvider: chartData,
                                                categoryField: "date"
                                        }],


                                        panels: [{
                                                        showCategoryAxis: false,
                                                        title: "Value",
                                                        percentHeight: 70,

                                                        valueAxes:[{
                                                                        id:"v1"
                                                                }
                                                        ],

                                                        stockGraphs: [{
                                                                id: "g1",
                                                                valueField: "value",
                                                                type: "smoothedLine",
                                                                lineThickness: 2,
                                                                bullet: "round"
                                                        }],

                                                        stockLegend: {
                                                                valueTextRegular: " ",
                                                                markerType: "none"
                                                        }
                                                },



                                                {
                                                        title: "Volume",
                                                        percentHeight: 30,

                                                        stockGraphs: [{
                                                                valueField: "volume",
                                                                type: "column",
                                                                cornerRadiusTop: 2,
                                                                fillAlphas: 1
                                                        }],

                                                        stockLegend: {
                                                                valueTextRegular: " ",
                                                                markerType: "none"
                                                        }
                                                }
                                        ],

                                        chartScrollbarSettings: {
                                                graph: "g1",
                                                usePeriod: "10mm",
                                                position: "top",
                                                updateOnReleaseOnly:false
                                        },

                                        chartCursorSettings: {
                                                valueBalloonsEnabled: true,
                                                valueLineBalloonEnabled:true,
                                                valueLineEnabled:true
                                        },

                                        periodSelector: {
                                                position: "bottom",
                                                dateFormat: "YYYY-MM-DD HH:NN",
                                                inputFieldWidth: 150,
                                                periods: [{
                                                        period: "hh",
                                                        count: 1,
                                                        label: "1 hour",
                                                        selected: true

                                                }, {
                                                        period: "hh",
                                                        count: 2,
                                                        label: "2 hours"
                                                }, {
                                                        period: "hh",
                                                        count: 5,
                                                        label: "5 hour"
                                                }, {
                                                        period: "hh",
                                                        count: 12,
                                                        label: "12 hours"
                                                }, {
                                                        period: "MAX",
                                                        label: "MAX"
                                                }]
                                        },

                                        panelsSettings: {
                                                usePrefixes: true
                                        }
                                });

                </script>
        </head>
        <body style="background-color:#FFFFFF">
                <div id="chartdiv" style="width:100%; height:600px;"></div>
        </body>

</html>