communityhallv22/target/classes/static/assets/node_modules/amcharts3/samples/microCharts.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 src="../amcharts/pie.js" type="text/javascript"></script>

        <script>

			AmCharts.ready(function () {

			    // line chart, with a bullet at the end
			    var chart = new AmCharts.AmSerialChart();
			    chart.dataProvider = [{
			        "day": 1,
			            "value": 120
			    }, {
			        "day": 2,
			            "value": 124
			    }, {
			        "day": 3,
			            "value": 127
			    }, {
			        "day": 4,
			            "value": 122
			    }, {
			        "day": 5,
			            "value": 121
			    }, {
			        "day": 6,
			            "value": 123
			    }, {
			        "day": 7,
			            "value": 118
			    }, {
			        "day": 8,
			            "value": 113
			    }, {
			        "day": 9,
			            "value": 122
			    }, {
			        "day": 10,
			            "value": 125,
			        bullet: "round"
			    }];
			    chart.categoryField = "day";
			    chart.autoMargins = false;
			    chart.marginLeft = 0;
			    chart.marginRight = 5;
			    chart.marginTop = 0;
			    chart.marginBottom = 0;

			    var graph = new AmCharts.AmGraph();
			    graph.valueField = "value";
			    graph.bulletField = "bullet";
			    graph.showBalloon = false;
			    graph.lineColor = "#a9ec49";
			    chart.addGraph(graph);

			    var valueAxis = new AmCharts.ValueAxis();
			    valueAxis.gridAlpha = 0;
			    valueAxis.axisAlpha = 0;
			    chart.addValueAxis(valueAxis);

			    var categoryAxis = chart.categoryAxis;
			    categoryAxis.gridAlpha = 0;
			    categoryAxis.axisAlpha = 0;
			    categoryAxis.startOnAxis = true;
			    chart.write("line1");


			    // small column chart
			    chart = new AmCharts.AmSerialChart();
			    chart.dataProvider = [{
			        "day": 1,
			            "value": -5
			    }, {
			        "day": 2,
			            "value": 3
			    }, {
			        "day": 3,
			            "value": 7
			    }, {
			        "day": 4,
			            "value": -3
			    }, {
			        "day": 5,
			            "value": 3
			    }, {
			        "day": 6,
			            "value": 4
			    }, {
			        "day": 7,
			            "value": 6
			    }, {
			        "day": 8,
			            "value": -3
			    }, {
			        "day": 9,
			            "value": -2
			    }, {
			        "day": 10,
			            "value": 6
			    }];
			    chart.categoryField = "day";
			    chart.autoMargins = false;
			    chart.marginLeft = 0;
			    chart.marginRight = 0;
			    chart.marginTop = 0;
			    chart.marginBottom = 0;

			    graph = new AmCharts.AmGraph();
			    graph.valueField = "value";
			    graph.type = "column";
			    graph.fillAlphas = 1;
			    graph.lineColor = "#a9ec49";
			    graph.showBalloon = false;
			    chart.addGraph(graph);

			    valueAxis = new AmCharts.ValueAxis();
			    valueAxis.gridAlpha = 0;
			    valueAxis.axisAlpha = 0;
			    chart.addValueAxis(valueAxis);

			    categoryAxis = chart.categoryAxis;
			    categoryAxis.gridAlpha = 0;
			    categoryAxis.axisAlpha = 0;
			    chart.write("column1");


			    // line chart, with different line color below zero
			    chart = new AmCharts.AmSerialChart();
			    chart.dataProvider = [{
			        "day": 1,
			            "value": 120
			    }, {
			        "day": 2,
			            "value": 54
			    }, {
			        "day": 3,
			            "value": -18
			    }, {
			        "day": 4,
			            "value": -12
			    }, {
			        "day": 5,
			            "value": -51
			    }, {
			        "day": 6,
			            "value": 12
			    }, {
			        "day": 7,
			            "value": 56
			    }, {
			        "day": 8,
			            "value": 113
			    }, {
			        "day": 9,
			            "value": 142
			    }, {
			        "day": 10,
			            "value": 125
			    }];
			    chart.categoryField = "day";
			    chart.autoMargins = false;
			    chart.marginLeft = 0;
			    chart.marginRight = 5;
			    chart.marginTop = 0;
			    chart.marginBottom = 0;

			    graph = new AmCharts.AmGraph();
			    graph.valueField = "value";
			    graph.showBalloon = false;
			    graph.lineColor = "#ffbf63";
			    graph.negativeLineColor = "#289eaf";
			    chart.addGraph(graph);

			    valueAxis = new AmCharts.ValueAxis();
			    valueAxis.gridAlpha = 0;
			    valueAxis.axisAlpha = 0;
			    chart.addValueAxis(valueAxis);

			    categoryAxis = chart.categoryAxis;
			    categoryAxis.gridAlpha = 0;
			    categoryAxis.axisAlpha = 0;
			    categoryAxis.startOnAxis = true;

			    // using guide to show 0 grid
			    var guide = new AmCharts.Guide();
			    guide.value = 0;
			    guide.lineAlpha = 0.1;
			    valueAxis.addGuide(guide);
			    chart.write("line2");


			    // column chart with different negative colors
			    chart = new AmCharts.AmSerialChart();
			    chart.dataProvider = [{
			        "day": 1,
			            "value": -5
			    }, {
			        "day": 2,
			            "value": 3
			    }, {
			        "day": 3,
			            "value": 7
			    }, {
			        "day": 4,
			            "value": -3
			    }, {
			        "day": 5,
			            "value": 3
			    }, {
			        "day": 6,
			            "value": 4
			    }, {
			        "day": 7,
			            "value": 6
			    }, {
			        "day": 8,
			            "value": -3
			    }, {
			        "day": 9,
			            "value": -2
			    }, {
			        "day": 10,
			            "value": 6
			    }];
			    chart.categoryField = "day";
			    chart.autoMargins = false;
			    chart.marginLeft = 0;
			    chart.marginRight = 0;
			    chart.marginTop = 0;
			    chart.marginBottom = 0;

			    graph = new AmCharts.AmGraph();
			    graph.valueField = "value";
			    graph.type = "column";
			    graph.fillAlphas = 1;
			    graph.showBalloon = false;
			    graph.lineColor = "#ffbf63";
			    graph.negativeFillColors = "#289eaf";
			    graph.negativeLineColor = "#289eaf";
			    chart.addGraph(graph);

			    valueAxis = new AmCharts.ValueAxis();
			    valueAxis.gridAlpha = 0;
			    valueAxis.axisAlpha = 0;
			    chart.addValueAxis(valueAxis);

			    categoryAxis = chart.categoryAxis;
			    categoryAxis.gridAlpha = 0;
			    categoryAxis.axisAlpha = 0;
			    chart.write("column2");


			    // column chart (thermometer)
			    chart = new AmCharts.AmSerialChart();
			    chart.dataProvider = [{
			        x: 1,
			        y: 100
			    }];
			    chart.categoryField = "x";
			    chart.rotate = true;
			    chart.autoMargins = false;
			    chart.marginLeft = 0;
			    chart.marginRight = 0;
			    chart.marginTop = 0;
			    chart.marginBottom = 0;

			    graph = new AmCharts.AmGraph();
			    graph.valueField = "y";
			    graph.type = "column";
			    graph.fillAlphas = 1;
			    graph.fillColors = ["#49cbec", "#f73838"];
			    graph.gradientOrientation = "horizontal";
			    graph.lineColor = "#FFFFFF";
			    graph.showBalloon = false;
			    chart.addGraph(graph);

			    valueAxis = new AmCharts.ValueAxis();
			    valueAxis.gridAlpha = 0;
			    valueAxis.axisAlpha = 0;
			    valueAxis.stackType = "100%"; // this is set to achieve that column would occupie 100% of the chart area
			    chart.addValueAxis(valueAxis);

			    categoryAxis = chart.categoryAxis;
			    categoryAxis.gridAlpha = 0;
			    categoryAxis.axisAlpha = 0;

			    // guide to show position
			    guide = new AmCharts.Guide();
			    guide.value = 66;
			    guide.lineAlpha = 1;
			    guide.above = true;
			    valueAxis.addGuide(guide);
			    chart.write("thermometer1");



			    // column chart (thermometer)
			    chart = new AmCharts.AmSerialChart();
			    chart.dataProvider = [{
			        "x": 1,
			            "y": 100
			    }];
			    chart.categoryField = "x";
			    chart.rotate = true;
			    chart.autoMargins = false;
			    chart.marginLeft = 0;
			    chart.marginRight = 0;
			    chart.marginTop = 0;
			    chart.marginBottom = 0;

			    graph = new AmCharts.AmGraph();
			    graph.valueField = "y";
			    graph.type = "column";
			    graph.fillAlphas = 1;
			    graph.fillColors = ["#49cbec", "#f73838"];
			    graph.gradientOrientation = "horizontal";
			    graph.lineColor = "#FFFFFF";
			    graph.showBalloon = false;
			    chart.addGraph(graph);

			    valueAxis = new AmCharts.ValueAxis();
			    valueAxis.gridAlpha = 0;
			    valueAxis.axisAlpha = 0;
			    valueAxis.stackType = "100%"; // this is set to achieve that column would occupie 100% of the chart area
			    chart.addValueAxis(valueAxis);

			    categoryAxis = chart.categoryAxis;
			    categoryAxis.gridAlpha = 0;
			    categoryAxis.axisAlpha = 0;

			    // guide to show position
			    guide = new AmCharts.Guide();
			    guide.value = 29;
			    guide.lineAlpha = 1;
			    guide.above = true;
			    valueAxis.addGuide(guide);
			    chart.write("thermometer2");




			    // percent chart
			    chart = new AmCharts.AmSerialChart();
			    chart.dataProvider = [{
			        "x": 1,
			            "y1": 66,
			            "y2": 34
			    }];
			    chart.categoryField = "x";
			    chart.rotate = true;
			    chart.autoMargins = false;
			    chart.marginLeft = 0;
			    chart.marginRight = 0;
			    chart.marginTop = 0;
			    chart.marginBottom = 0;

			    graph = new AmCharts.AmGraph();
			    graph.valueField = "y1";
			    graph.type = "column";
			    graph.fillAlphas = 0.6;
			    graph.fillColors = "#000000";
			    graph.gradientOrientation = "horizontal";
			    graph.lineColor = "#FFFFFF";
			    graph.showBalloon = false;
			    chart.addGraph(graph);

			    var graph2 = new AmCharts.AmGraph();
			    graph2.valueField = "y2";
			    graph2.type = "column";
			    graph2.fillAlphas = 0.2;
			    graph2.fillColors = "#000000";
			    graph2.lineColor = "#FFFFFF";
			    graph2.showBalloon = false;
			    chart.addGraph(graph2);

			    valueAxis = new AmCharts.ValueAxis();
			    valueAxis.gridAlpha = 0;
			    valueAxis.axisAlpha = 0;
			    valueAxis.stackType = "100%"; // this is set to achieve that column would occupie 100% of the chart area
			    chart.addValueAxis(valueAxis);

			    categoryAxis = chart.categoryAxis;
			    categoryAxis.gridAlpha = 0;
			    categoryAxis.axisAlpha = 0;

			    chart.write("percent1");


			    // percent chart
			    chart = new AmCharts.AmSerialChart();
			    chart.dataProvider = [{
			        "x": 1,
			            "y1": 29,
			            "y2": 71
			    }];
			    chart.categoryField = "x";
			    chart.rotate = true;
			    chart.autoMargins = false;
			    chart.marginLeft = 0;
			    chart.marginRight = 0;
			    chart.marginTop = 0;
			    chart.marginBottom = 0;

			    graph = new AmCharts.AmGraph();
			    graph.valueField = "y1";
			    graph.type = "column";
			    graph.fillAlphas = 0.6;
			    graph.fillColors = "#000000";
			    graph.gradientOrientation = "horizontal";
			    graph.lineColor = "#FFFFFF";
			    graph.showBalloon = false;
			    chart.addGraph(graph);

			    graph2 = new AmCharts.AmGraph();
			    graph2.valueField = "y2";
			    graph2.type = "column";
			    graph2.fillAlphas = 0.2;
			    graph2.fillColors = "#000000";
			    graph2.lineColor = "#FFFFFF";
			    graph2.showBalloon = false;
			    chart.addGraph(graph2);

			    valueAxis = new AmCharts.ValueAxis();
			    valueAxis.gridAlpha = 0;
			    valueAxis.axisAlpha = 0;
			    valueAxis.stackType = "100%"; // this is set to achieve that column would occupie 100% of the chart area
			    chart.addValueAxis(valueAxis);

			    categoryAxis = chart.categoryAxis;
			    categoryAxis.gridAlpha = 0;
			    categoryAxis.axisAlpha = 0;
			    chart.write("percent2");

			    // small pie chart
			    chart = new AmCharts.AmPieChart();
			    chart.dataProvider = [{
			        "x": 1,
			            "value": 29
			    }, {
			        "x": 2,
			            "value": 71
			    }];
			    chart.labelField = "x";
			    chart.valueField = "value";
			    chart.labelsEnabled = false;
			    chart.balloonText = undefined;
			    chart.valueText = undefined;
			    chart.radius = 10; // half of a width of a div
			    chart.colors = ["#DADADA", "#777777"];
			    chart.startDuration = 0;
			    chart.write("pie1");

			    // small pie chart
			    chart = new AmCharts.AmPieChart();
			    chart.dataProvider = [{
			        "x": 1,
			            "value": 45
			    }, {
			        "x": 2,
			            "value": 55
			    }];
			    chart.labelField = "x";
			    chart.balloonText = undefined;
			    chart.valueField = "value";
			    chart.labelsEnabled = false;
			    chart.valueText = undefined;
			    chart.radius = 10;
			    chart.colors = ["#DADADA", "#777777"];
			    chart.startDuration = 0;
			    chart.write("pie2");

			});

        </script>
    </head>

    <body>

    <!-- first chart group -->
    <div class="chart-block">
      <p><b>Some simple sparklines and micro column chart:</b></p>
      Alaska, 120 <div id="line1" style="vertical-align: middle; display: inline-block; width: 100px; height: 30px;"></div> 6% <div id="column1" style="vertical-align: middle;display: inline-block; width: 110px; height: 30px;"></div>
    </div>

    <!-- second chart group -->
    <div class="chart-block">
      <p><b>More advanced, with different line and fill colors:</b></p>
      Alaska, 120 <div id="line2" style="vertical-align: middle; display: inline-block; width: 100px; height: 30px;"></div> 6% <div id="column2" style="vertical-align: middle;display: inline-block; width: 110px; height: 30px;"></div>
    </div>

    <!-- third chart group -->
    <div class="chart-block">
      <p><b>Thermometer example:</b></p>
      Alaska, 66% <div id="thermometer1" style="vertical-align: middle; display: inline-block; width: 100px; height: 20px;"></div><br />
      Alabama, 39% <div id="thermometer2" style="vertical-align: middle;display: inline-block; width: 100px; height: 20px"></div>
    </div>

    <!-- fourth chart group -->
    <div class="chart-block">
      <p><b>Simple percent chart example:</b></p>
      Alaska, 66% <div id="percent1" style="vertical-align: middle; display: inline-block; width: 100px; height: 20px;"></div><br />
      Alabama, 39% <div id="percent2" style="vertical-align: middle;display: inline-block; width: 100px; height: 20px;"></div>
    </div>

    <!-- fifth chart group -->
    <div class="chart-block">
      <p><b>Simple percent chart example:</b></p>
      Alaska, 71% <div id="pie1" style="vertical-align: middle; display: inline-block; width: 20px; height: 20px;"></div><br />
      Alabama, 45% <div id="pie2" style="vertical-align: middle; display: inline-block; width: 20px; height: 20px;"></div>
    </div>

    <p>Please note that sparkline charts are NOT usable with the free version of JavaScript Charts due to branding link taking up most of the plot area. Please consider <a href="http://shop.amcharts.com/">acquiring a commercial license</a>. (licenses starting as low as USD 140)</p>

</html>