packages feed

charter-0.1.1.0: templates/index.html

<html>
    <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    </head>
    <body>
        <style>
            #error {
                margin: auto;
                color: maroon;
                background-color: #fdd0d0;
                padding: 1em;
                font-size: 1.5em;
            }

            #chart {
                width: 100%;
                height: 90vh;
                margin: auto;
            }

            .hidden {
                display: none;
            }
        </style>
        <div id="error" class="hidden"></div>
        <div id="chart"></div>

        <script type="text/javascript">
            var dynamic = true;
            google.charts.load('current', {'packages':['corechart']});
            google.charts.setOnLoadCallback(kickoff);
            function refresh() {
                if (!dynamic) {
                    return;
                }
                fetch('/data')
                    .then(resp => resp.json())
                    .then(chart => initChart(chart));
            }
            function kickoff() {
                refresh();
                window.setInterval(refresh, 1000)
            }
            function initChart(chart){
                dynamic = chart.dynamic;
                var errContainer = document.getElementById('error');
                errContainer.textContent = "";
                errContainer.classList.add('hidden');
                try {
                    var data = new google.visualization.DataTable();

                    chart.columns.forEach(col => {
                        data.addColumn(col);
                    })

                    data.addRows(chart.rows);

                    var destElem = document.getElementById("chart")
                    var gChart;
                    switch (chart.style) {
                        case 'line':
                            gChart = new google.visualization.LineChart(destElem);
                            break;
                        case 'histogram':
                            gChart = new google.visualization.Histogram(destElem);
                            break;
                        case 'bar':
                            gChart = new google.visualization.BarChart(destElem);
                            break;
                        case 'scatter':
                            gChart = new google.visualization.ScatterChart(destElem);
                            break;
                        case 'area':
                            gChart = new google.visualization.AreaChart(destElem);
                            break;
                        case 'column':
                            gChart = new google.visualization.ColumnChart(destElem);
                            break;
                        case 'pie':
                            gChart = new google.visualization.PieChart(destElem);
                            break;
                        case 'bubble':
                            gChart = new google.visualization.BubbleChart(destElem);
                            break;
                        case 'steppedarea':
                            gChart = new google.visualization.SteppedAreaChart(destElem);
                            break;
                        case 'candlestick':
                            gChart = new google.visualization.CandlestickChart(destElem);
                            break;
                        default:
                            alert('unknown chart style: ' + chart.style)
                            break;
                    }
                    gChart.draw(data, chart.options);
                } catch(err) {
                    errContainer.textContent = err.toString();
                    errContainer.classList.remove('hidden');
                }
            }
        </script>
    </body>
</html>