Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdn.jsdelivr.net/chart.js/1.0.2/Chart.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <canvas id="box-plot" width="400" height="338" style="background-color: lightgreen;"></canvas>
  <div id="box-plot-legende"></div>
  <script>
     var legendTemplate = "<span class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><span style=\"background-color:<%=datasets[i].strokeColor%>\">&nbsp;&nbsp;&nbsp;</span>&nbsp;<%if(datasets[i].label){%><%=datasets[i].label%><%}%>&nbsp;&nbsp;<%}%></span>";
​
    var boxChartData = {
      labels : ["January", "February", "March"],
      datasets : [
        {
          label: "BP1",
          fillColor: "rgba(0, 102, 255, 0.2)",
          strokeColor : "rgba(151,187,205,1)",
          pointColor : "rgba(151,187,205,1)",
          pointStrokeColor : "#fff",
          pointHighlightFill : "#fff",
          pointHighlightStroke : "rgba(151,187,205,1)",
          data : [
            [10, 4, 7, 5, 7],
            [5, 4, 4, 4, 7],
            [25, 5, 6, 4, 5]
          ]
        },
        {
          label: "BP2",
          fillColor: "rgba(102, 0, 255, 0.2)",
          strokeColor : "rgba(187,151,205,1)",
          pointColor : "rgba(187,151,205,1)",
          pointStrokeColor : "#fff",
          pointHighlightFill : "#fff",
          pointHighlightStroke : "rgba(187,151,205,1)",
          data : [
            [15, 7, 5, 3, 7],
            [10, 4, 7, 5, 7],
            [25, 5, 6, 4, 5]
          ]
        },
        {
          label: "BP3",
          fillColor: "rgba(119, 136, 153, 0.2)",
          strokeColor : "rgba(220,220,220,1)",
          pointColor : "rgba(220,220,220,1)",
          pointStrokeColor : "#fff",
          pointHighlightFill : "#fff",
          pointHighlightStroke : "rgba(220,220,220,1)",
          data : [
            [25, 5, 6, 4, 5],
            [5, 4, 4, 4, 7],
            [10, 4, 7, 5, 7]
          ]
        },
        {
          label: "BP4",
          fillColor: "rgba(119, 36, 53, 0.2)",
          strokeColor : "rgba(220,120,220,1)",
          pointColor : "rgba(220,120,220,1)",
          pointStrokeColor : "#fff",
          pointHighlightFill : "#fff",
          pointHighlightStroke : "rgba(220,120,220,1)",
          data : [
            [25, 5, 6, 4, 5],
            [5, 4, 4, 4, 7],
            [10, 4, 7, 5, 7]
          ]
        }
      ]
    };
    var ctx = document.getElementById("box-plot").getContext("2d");
    var myBar = new Chart(ctx).BoxPlot(boxChartData, {
      animation: false,
      responsive : false,
      showTooltips: false,
      legendTemplate: legendTemplate,
      scaleShowHorizontalLines: true,
      scaleShowVerticalLines: true
    });
    var legende = myBar.generateLegend();
    $('#box-plot-legende').html(legende);
  </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers