communityhallv22/target/classes/static/assets/node_modules/amcharts3/samples/lineStepNoRisers.html

<!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>
           var chart;
           var graph;

           var chartData = [
                {
                    "year": "1950",
                    "value": 0.22
                },
                {
                    "year": "1951",
                    "value": 0.168
                },
                {
                    "year": "1952",
                    "value": 0.103
                },
                {
                    "year": "1953",
                    "value": 0.067
                },
                {
                    "year": "1954",
                    "value": 0.151
                },
                {
                    "year": "1955",
                    "value": 0.281
                },
                {
                    "year": "1956",
                    "value": 0.348
                },
                {
                    "year": "1957",
                    "value": 0.274
                },
                {
                    "year": "1958",
                    "value": 0.211
                },
                {
                    "year": "1959",
                    "value": 0.174
                },
                {
                    "year": "1960",
                    "value": 0.124
                },
                {
                    "year": "1961",
                    "value": 0.064
                },
                {
                    "year": "1962",
                    "value": 0.032
                },
                {
                    "year": "1963",
                    "value": 0.05
                },
                {
                    "year": "1964",
                    "value": 0.106
                }
            ];


           AmCharts.ready(function () {
               // SERIAL CHART
               chart = new AmCharts.AmSerialChart();

               chart.marginRight = 0;
               chart.marginTop = 0;
               chart.dataProvider = chartData;
               chart.categoryField = "year";
               chart.dataDateFormat = "YYYY";
               chart.color = "#FFFFFF";

               chart.backgroundImage = "images/bgSky.jpg";

               // AXES
               // Category
               var categoryAxis = chart.categoryAxis;
               categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
               categoryAxis.minPeriod = "YYYY"; // our data is yearly, so we set minPeriod to YYYY
               categoryAxis.gridCount = 20;
               categoryAxis.autoGridCount = false;
               categoryAxis.axisAlpha = 0.3;
               categoryAxis.axisColor = "#FFFFFF";
               categoryAxis.gridAlpha = 0.05;

               // VALUE
               var valueAxis = new AmCharts.ValueAxis();
               valueAxis.gridAlpha = 0;
               valueAxis.axisAlpha = 0.3;
               valueAxis.axisColor = "#FFFFFF";
               valueAxis.showLastLabel = false;
               chart.addValueAxis(valueAxis);

               // GRAPH
               graph = new AmCharts.AmGraph();
               graph.type = "step"; // this line makes step graph
               graph.noStepRisers = true;
               graph.valueField = "value";
               graph.lineColor = "#FFFFFF";
               graph.lineThickness = 1;
               graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>";
               chart.addGraph(graph);

               // CURSOR
               var chartCursor = new AmCharts.ChartCursor();
               chartCursor.cursorAlpha = 0;
               chartCursor.cursorPosition = "mouse";
               chartCursor.categoryBalloonDateFormat = "YYYY";
               chart.addChartCursor(chartCursor);

               chart.creditsPosition = "top-right";

               // WRITE
               chart.write("chartdiv");
           });
		</script>
	</head>

    <body>
        <div id="chartdiv" style="width: 800px; height: 500px;"></div>
    </body>

</html>