public function amchart_html()
    {
        ob_start();
        $charts = new MortgageRates_Charts();
        $chart_data = $charts->get_data_for_amchart();

        $line_color_30y = !empty(get_option('mortgage_rates_widget')['line_color_30y']) ? get_option('mortgage_rates_widget')['line_color_30y'] : '#3A1302';
        $line_color_15y = !empty(get_option('mortgage_rates_widget')['line_color_15y']) ? get_option('mortgage_rates_widget')['line_color_15y'] : '#8A2B0D';
        $line_color_5y = !empty(get_option('mortgage_rates_widget')['line_color_5y']) ? get_option('mortgage_rates_widget')['line_color_5y'] : '#C79F59'; ?>

		<div id="chartdiv-<?php echo time(); ?>" style="width: 100%;height: 500px;"></div>

        <script>
          am4core.ready(function() {

            // Themes begin
            am4core.useTheme(am4themes_moonrisekingdom);
            am4core.useTheme(am4themes_animated);
            // Themes end

            // Create chart instance
            var chart = am4core.create("chartdiv-<?php echo time() ?>", am4charts.XYChart);

            // Increase contrast by taking evey second color
            chart.colors.step = 2;
            chart.colors.list = [
              am4core.color("<?php echo $line_color_30y ?>"),
              am4core.color("<?php echo $line_color_15y ?>"),
              am4core.color("<?php echo $line_color_5y ?>"),
            ];

            // Add data
            chart.data = generateChartData();

            // Create axes
            var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
            dateAxis.renderer.minGridDistance = 50;

            // Create series
            function createAxisAndSeries(field, name, opposite, bullet) {
              var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

              var series = chart.series.push(new am4charts.LineSeries());
              series.dataFields.valueY = field;
              series.dataFields.dateX = "date";
              series.strokeWidth = 2;
              series.yAxis = valueAxis;
              series.name = name;
              series.tooltipText = "{name}: [bold]{valueY}[/]";
              series.tensionX = 0.8;

              var interfaceColors = new am4core.InterfaceColorSet();

              switch(bullet) {
                case "triangle":
                  var bullet = series.bullets.push(new am4charts.Bullet());
                  bullet.width = 12;
                  bullet.height = 12;
                  bullet.horizontalCenter = "middle";
                  bullet.verticalCenter = "middle";

                  var triangle = bullet.createChild(am4core.Triangle);
                  triangle.stroke = interfaceColors.getFor("background");
                  triangle.strokeWidth = 2;
                  triangle.direction = "top";
                  triangle.width = 12;
                  triangle.height = 12;
                  break;
                case "rectangle":
                  var bullet = series.bullets.push(new am4charts.Bullet());
                  bullet.width = 10;
                  bullet.height = 10;
                  bullet.horizontalCenter = "middle";
                  bullet.verticalCenter = "middle";

                  var rectangle = bullet.createChild(am4core.Rectangle);
                  rectangle.stroke = interfaceColors.getFor("background");
                  rectangle.strokeWidth = 2;
                  rectangle.width = 10;
                  rectangle.height = 10;
                  break;
                default:
                  var bullet = series.bullets.push(new am4charts.CircleBullet());
                  bullet.circle.stroke = interfaceColors.getFor("background");
                  bullet.circle.strokeWidth = 2;
                  break;
              }

              valueAxis.renderer.line.strokeOpacity = 1;
              valueAxis.renderer.line.strokeWidth = 2;
              valueAxis.renderer.line.stroke = series.stroke;
              valueAxis.renderer.labels.template.fill = series.stroke;
              valueAxis.renderer.opposite = opposite;
              valueAxis.renderer.grid.template.disabled = true;
            }

            createAxisAndSeries("30y", "30Y FRM", false, "circle");
            createAxisAndSeries("15y", "15Y FRM", true, "triangle");
            createAxisAndSeries("5y", "5Y ARM", true, "rectangle");

            // Add legend
            chart.legend = new am4charts.Legend();

            // Add cursor
            chart.cursor = new am4charts.XYCursor();

            // generate some random data, quite different range
            function generateChartData() {
              var chart_data = <?php echo wp_json_encode($chart_data) ?>;
              var chartData = [];

              jQuery.each(chart_data,function(i,j){
                newDate = new Date(i);
                chartData.push({
                  date: newDate,
                  '30y': j['30y'],
                  '15y': j['15y'],
                  '5y': j['5y']
                });
              })

              return chartData;
            };

          }); // end am4core.ready()
        </script>
		<?php
        return ob_get_clean();
    }