GhostJS - How to use external JavaScript libraries with custom HTML markup on your ghost blog platform

custom-html-and-js-in-ghost-js.html

<form class="tw-bs form-inline">
    <div class="form-group">
        <label class="sr-only" for="weight">Weight (in killograms)</label>
        <div class="input-group">
            <input type="number" class="text-right form-control" id="weight" placeholder="Weight" value="80">
            <div class="input-group-addon">Kgs</div>
        </div>
    </div>
</form>

<div id="chart">
    <svg style="height: 400px; margin: 0; width: 100%"></svg>
</div>


<script type="application/javascript">
    (function (urls) {
        for (var i = 0; i < urls.length; i++) {
            var link = document.createElement("link");
            link.type = "text/css";
            link.rel = "stylesheet";
            link.href = urls[i];
            document.getElementsByTagName("head")[0].appendChild(link);
        }
    })(['//cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.css', 'https://cdn.rawgit.com/GFoley83/7d71fb9605cad6de2a8b/raw/e1eec5f79d3132af7401fdd1ad1c584d4b3f4d75/tw-bs.3.1.1.css']);


    requirejs.config({
        "baseUrl": "/public",
        "paths": {
            "d3": "//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3",
            "nvd3": "//cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3",
            "jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min"
        },
        shim: {
            nvd3: {
                exports: 'nv',
                deps: ['d3.global']
            }
        }
    });

    define("d3.global", ["d3"], function (_) {
        d3 = _;
    });

    require(["jquery", "d3", "nvd3"], function ($, d3, nv) {

        var chart;
        var kiteSizes = [21, 20, 19, 18, 17, 16, 15, 14, 13, 12.5, 12, 11, 10.5, 10, 9.5, 9, 8, 7, 6, 5.0, 4.5, 4.0, 3.5, 3.0, 2, 1, 0];
        var idealWindConst = 2.175;
        var windTickMarks = [];
        var kiteSizeTickMarks = [21, 20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0];

        for (var i = 0; i < 40; i = i + 2) {
            windTickMarks.push(i);
        }

        function roundToTwo(num) {
            return +(Math.round(num + 'e+2') + 'e-2');
        }

        /*Random Data Generator */
        var getKiteSizeGraphData = function (weight) {
            var minimum = [],
                    maximum = [],
                    ideal = [];

            for (var i = 0; i < kiteSizes.length; i++) {
                // Trainer kites
                if (kiteSizes[i] < 6)
                    continue;

                var kiteSize = kiteSizes[i];

                //--------------------- Ideal calculations
                var windSpeed = (2.175 * weight) / kiteSizes[i];
                windSpeed = roundToTwo(windSpeed);

                ideal.push({
                    x: windSpeed > 40 ? 40 : windSpeed,
                    y: kiteSize
                });
                //--------------------- /Ideal calculations

                //--------------------- Minimum calculations
                windSpeed = (2.175 * weight) / kiteSizes[i] * 0.75;
                windSpeed = roundToTwo(windSpeed);

                minimum.push({
                    x: windSpeed > 40 ? 40 : windSpeed,
                    y: kiteSize
                });
                // ------------------- /Minimum calculations

                // -------------------- Max calculations
                windSpeed = (1.5 * 2.175 * weight) / kiteSizes[i];
                windSpeed = roundToTwo(windSpeed);

                maximum.push({
                    x: windSpeed > 40 ? 40 : windSpeed,
                    y: kiteSize
                });
                // ------------------- /Max calculations
            }


            //Line chart data should be sent as an array of series objects.
            return [{
                values: minimum, //values - represents the array of {x,y} data points
                key: 'Minimum', //key  - the name of the series.
                color: '#0070C0' //color - optional: choose your own line color.

            }, {
                values: maximum,
                key: 'Maximum',
                color: '#C0504D'
            }, {
                values: ideal,
                key: 'Ideal',
                color: '#7030A0'
            },
                {
                    values: [{x: 0, y: 0}]
                }];
        };


        nv.addGraph(function () {


            chart = nv.models.lineChart()
                    .showLegend(true)       //Show the legend, allowing users to turn on/off line series.
                    .showYAxis(true)        //Show the y-axis
                    .showXAxis(true);        //Show the x-axis;


            chart.xAxis     //Chart x-axis settings
                    .axisLabel('Wind speed (Knots)')
                    .tickValues(windTickMarks);

            chart.yAxis     //Chart y-axis settings
                    .axisLabel('Kitesize (m2)')
                    .tickValues(kiteSizeTickMarks);


            d3.select('#chart svg')
                    .datum(getKiteSizeGraphData(80))
                    .transition().duration(500)
                    .call(chart)
            ;

            nv.utils.windowResize(chart.update);

            return chart;
        });

        function redraw(weight) {
            d3.select('#chart svg')
                    .datum(getKiteSizeGraphData(weight))
                    .transition().duration(500)
                    .call(chart);
        }

        $("#weight").bind("change paste keyup", function () {
            var weight = $(this).val();
            if(weight.match(/[0-9]{2,}/))
            {
                redraw(parseInt(weight));
            }
        });

        $(document).ready(function(){
            redraw(80);
        });
    });
</script>