JSFiddle - React, Tailwind, and code Playground

by aspandit

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.stack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/excanvas.js"></script>
<h1>Rubric Representation Mockup</h1>
<div id="flot_scores_on_rubric_questions" style="width:600px;height:300px;">
</div>

JavaScript

$(function () {
   
   $.plot($("#flot_scores_on_rubric_questions"), [{"data":[[0,0],[1,0],[2,0],[3,0],[4,0],[5,0.0],[6,0.7246376811594203],[7,0.7246376811594203],[8,2.2388059701492535],[9,3.076923076923077],[10,3.608247422680412],[11,3.6269430051813467],[12,3.608247422680412],[13,4.123711340206185],[14,17.616580310880828]],"color":"#FF0000"},{"data":[[0,0],[1,0],[2,0],[3,0],[4,0],[5,0.0],[6,0.7246376811594203],[7,0.0],[8,0.0],[9,0.7692307692307693],[10,0.0],[11,0.0],[12,0.5154639175257731],[13,2.0618556701030926],[14,2.072538860103627]],"color":"#FF6600"},{"data":[[0,0],[1,0],[2,0],[3,0],[4,0],[5,0.0],[6,0.0],[7,0.7246376811594203],[8,2.2388059701492535],[9,2.307692307692308],[10,1.5463917525773196],[11,1.5544041450777202],[12,2.5773195876288657],[13,1.5463917525773196],[14,5.181347150259067]],"color":"#FFCC00"},{"data":[[0,0],[1,0],[2,0],[3,0],[4,0],[5,3.597122302158273],[6,6.521739130434782],[7,2.1739130434782608],[8,11.194029850746269],[9,13.076923076923078],[10,12.886597938144329],[11,5.181347150259067],[12,7.731958762886598],[13,11.34020618556701],[14,19.170984455958546]],"color":"#CCFF00"},{"data":[[0,0],[1,0],[2,0],[3,0],[4,0],[5,21.58273381294964],[6,18.84057971014493],[7,26.08695652173913],[8,23.134328358208954],[9,28.46153846153846],[10,34.5360824742268],[11,15.025906735751295],[12,38.659793814432994],[13,31.443298969072163],[14,18.134715025906736]],"color":"#66FF00"},{"data":[[0,0],[1,0],[2,0],[3,0],[4,0],[5,74.82014388489209],[6,73.18840579710145],[7,70.28985507246377],[8,61.19402985074627],[9,52.307692307692314],[10,47.42268041237113],[11,74.61139896373057],[12,46.90721649484536],[13,49.48453608247423],[14,37.82383419689119]],"color":"#00FF00"}], {
      xaxis: {
        ticks: [[0,"Rubric #0 Round #3"],[1,"Rubric #1 Round #3"],[2,"Rubric #2 Round #3"],[3,"Rubric #3 Round #3"],[4,"Rubric #4 Round #3"],[5,"Rubric #0 Round #2"],[6,"Rubric #1 Round #2"],[7,"Rubric #2 Round #2"],[8,"Rubric #3 Round #2"],[9,"Rubric #4 Round #2"],[10,"Rubric #0 Round...