script.html.erb

<script>
    var data_ctx = document.getElementById("chart_canvas").getContext("2d");
    var overlay_canvas = document.getElementById("overlay_canvas");
    var overlay_ctx = overlay_canvas.getContext("2d");
    var ticks_ctx = document.getElementById("ticks_canvas").getContext("2d");
    <% if meta[:display_legend] %>
    var legend_ctx = document.getElementById("legend_canvas").getContext("2d");
    <% end %>


    // This is the actual data being plotted.
    // The only relevant bits are the background colors and the data values
    data = {
        datasets: [
            {
                label: "Score",
                data: [<%= chart_data[:values].join(',') %>],
                backgroundColor: [<%= chart_data[:colors].map { |l| "\"#{l}\""}.join(',') %>],
                borderColor: [<%= chart_data[:colors].map { |_| "\"#000000\""}.join(',') %>],
                borderWidth: 1
            }
        ],
        labels: [<%= chart_data[:labels].map { |l| "\"#{l}\""}.join(',') %>],
        true_values: [<%= chart_data[:values].join(',') %>]
    };
    options = {
        scale: {
            display: false,
            gridLines: {
                lineWidth: <%= meta.fetch(:main_line_width, 3) %>,
                drawBorder: true,
                drawOnChartArea: true
            },
            layout: {
                padding: {
                    left: 0,
                    right: 0,
                    top: 2,
                    bottom: 2
                }
            },
            ticks: {
                beginAtZero: true,
                drawOnChartArea: true,
                min: 0,
                max: <%= meta[:max_score] %>,
                stepSize: <%= meta.fetch(:step_size, 1) %>,
                callback: function (value, index, values) {
                    return "";
                }
            }
        },
        legend: {
            display: false
        },
        tooltips: {
            callbacks: {
                label: function (tooltipItem, data) {
                    var label = data.labels[tooltipItem.index] || '';
                    return label + ": " + Math.round(data.true_values[tooltipItem.index]);
                }
            }
        }
    };

    <% if meta[:display_legend] %>
    // This layer provides the legend
    legendData = {
        datasets: [
            {
                label: "Score",
                data: [<%= chart_data[:ticks].join(',') %>],
                backgroundColor: [<%= chart_data[:colors].map { |c| "\"#{c}\""}.join(',') %>],
                borderColor: [<%= chart_data[:colors].map { |_| "\"rgba(255,0,0,0.0)\""}.join(',') %>]
            }
        ],
        labels: [<%= chart_data[:labels].map { |l| "\"#{l}\""}.join(',') %>],
        true_values: [<%= chart_data[:values].join(',') %>]
    };
    legendOptions = {
        animation: false,
        scale: {
            display: false
        },
        legend: {
            display: <%= meta.fetch(:display_legend, true).to_s %>,
            position: 'left',
            labels : {
                fontSize: 14,
                fontFamily: "'muli', 'Myriad Pro', Helvetica, Arial, sans-serif"
            }
        },
        tooltips: {
            callbacks: {
                label: function (tooltipItem, data) {
                    var label = data.labels[tooltipItem.index] || '';
                    return label + ": " + Math.round(data.true_values[tooltipItem.index]);
                }
            }
        }
    };
<% end %>
    // This provides layer gives us the dividing border lines.
    // The data values for this are all set to 1.0 and the background
    // color is transparent so that the colors from the content layer
    // can show through.
    ///
    // this layer is drawn last.
    overlayData = {
        datasets: [
            {
                label: "Score",
                data: [<%= chart_data[:ranges].join(',') %>],
                backgroundColor: [<%= chart_data[:colors].map { |_| "\"rgba(255,0,0,0.0)\""}.join(',') %>],
                borderWidth: 2,
                borderColor: [<%= chart_data[:colors].map { |_| "\"#000000\""}.join(',') %>],
            }
        ],
        labels: [<%= chart_data[:labels].map { |l| "\"#{l}\""}.join(',') %>],
        true_values: [<%= chart_data[:values].join(',') %>]
    };
    overlayOptions = {
        animation: false,
        scale: {
            display: false
        },
        legend: {
            display: false
        },
        layout: {
            padding: {
                left: 0,
                right: 0,
                top: 2,
                bottom: 2
            }
        },
        tooltips: {
            displayColors: false,
            callbacks: {
                label: function (tooltipItem, data) {
                    var label = data.labels[tooltipItem.index] || '';
                    return label + ": " + Math.round(data.true_values[tooltipItem.index] * 100) / 100;
                }
            }
        }
    };


    // This layer provides the tick marks, it's drawn between the content and
    // the overlay.  The data values are all set to zero so that we get tick
    // marks all the way to the center, even where there's data
    //
    ticksData = {
        datasets: [
            {
                label: "Score",
                data: [<%= chart_data[:ticks].join(',') %>],
            }
        ],
        labels: [<%= chart_data[:labels].map { |l| "\"#{l}\""}.join(',') %>],
        true_values: [<%= chart_data[:values].join(',') %>]
    };
    ticksOptions = {
        animation: false,
        scale: {
            display: <%= meta.fetch(:display_ticks_scale, true).to_s %>,
            gridLines: {
                lineWidth: <%= meta.fetch(:tick_line_width, 3) %>,
                drawBorder: false,
            },
            ticks: {
                beginAtZero: true,
                min: 0,
                max: <%= meta[:max_score] %>,
                stepSize: <%= meta.fetch(:tick_size, 1) %>,
                callback: function (value, index, values) {
                    return "";
                }
            }
        },
        legend: {
            display: false
        },
        layout: {
            padding: {
                left: 0,
                right: 0,
                top: 2,
                bottom: 2
            }
        },
        tooltips: {
            callbacks: {
                label: function (tooltipItem, data) {
                    var label = data.labels[tooltipItem.index] || '';
                    return label + ": " + Math.round(data.true_values[tooltipItem.index]);
                }
            }
        }
    };

    new Chart(data_ctx, { data: data, type: "polarArea", options: options });

    var overlay_chart = new Chart(overlay_ctx, { data: overlayData, type: "polarArea", options: overlayOptions });

    new Chart(ticks_ctx, { data: ticksData, type: "polarArea", options: ticksOptions });

    <% if meta[:display_legend] %>
    new Chart(legend_ctx, { data: legendData, type: "polarArea", options: legendOptions });
    <% end %>

    <% if chart_data.fetch(:use_nav, false) %>
    overlay_canvas.onclick = function (e) {
        var slice = overlay_chart.getElementAtEvent(e);
        if (!slice.length) return; // return if not clicked on slice
        var label = slice[0]._model.label.replace(/(-|\/|:| )/g, '');
        window.location = "<%= chart_data.fetch(:url_prefix, '')%>" + label + ".html";
    }
    <% end %>
</script>