GlobalCube
/
Fehlerbericht


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
							<!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">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>amCharts Responsive Example</title>
  <script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
  <script src="http://www.amcharts.com/lib/3/serial.js"></script>
  <script src="../responsive.min.js"></script>
  <style>
  body, html {
    height: 100%;
    padding: 0;
    margin: 0;
  }
  </style>
  <script>

    var chartData = [];
    generateChartData();

    var chart = AmCharts.makeChart("chartdiv", {
      "type": "serial",
      "dataProvider": chartData,
      "categoryField": "date",
      "categoryAxis": {
        "parseDates": true,
        "gridAlpha": 0.15,
        "minorGridEnabled": true,
        "axisColor": "#DADADA"
      },
      "valueAxes": [{
        "axisAlpha": 0.2,
        "id": "v1"
      }],
      "graphs": [{
        "title": "red line",
        "id": "g1",
        "valueAxis": "v1",
        "valueField": "visits",
        "bullet": "round",
        "bulletBorderColor": "#FFFFFF",
        "bulletBorderAlpha": 1,
        "lineThickness": 2,
        "lineColor": "#b5030d",
        "negativeLineColor": "#0352b5",
        "balloonText": "[[category]]<br><b><span style='font-size:14px;'>value: [[value]]</span></b>"
      }],
      "chartCursor": {
        "fullWidth": true,
        "cursorAlpha": 0.1
      },
      "chartScrollbar": {
        "scrollbarHeight": 40,
        "color": "#FFFFFF",
        "autoGridCount": true,
        "graph": "g1"
      },
      "mouseWheelZoomEnabled": true,
      "responsive": {
        "enabled": true
      }
    });

    chart.addListener("dataUpdated", zoomChart);


    // generate some random data, quite different range
    function generateChartData() {
      var firstDate = new Date();
      firstDate.setDate(firstDate.getDate() - 500);

      for (var i = 0; i < 500; i++) {
        // we create date objects here. In your data, you can have date strings
        // and then set format of your dates using chart.dataDateFormat property,
        // however when possible, use date objects, as this will speed up chart rendering.
        var newDate = new Date(firstDate);
        newDate.setDate(newDate.getDate() + i);

        var visits = Math.round(Math.random() * 40) - 20;

        chartData.push({
            date: newDate,
            visits: visits
        });
      }
    }

    // this method is called when chart is first inited as we listen for "dataUpdated" event
    function zoomChart() {
      // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
      chart.zoomToIndexes(chartData.length - 40, chartData.length - 1);
    }

  </script>
</head>

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

</html>