School Level Available courses

<html>
<div id="chartContainer">

  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://dimplejs.org/dist/dimple.v2.3.0.min.js"></script>
  <script type="text/javascript">
    
    var svg = dimple.newSvg("#chartContainer", 1000, 1050);
    
    d3.csv("test_lms_course_status_ratio.csv", function (data) {

// Get a unique list of dates
      var majors = dimple.getUniqueValues(data, "SchoolName");

// Set the bounds for the charts
      var row = 0,
          col = 0,
          top = 35,
          left = 60,
          inMarg = 15,
          width = 350,
          height = 350,
          totalWidth = parseFloat(svg.attr("width"));

// Pick the latest 12 dates
      majors = majors.slice(0,4);

// Draw a chart for each of the 12 dates
      majors.forEach(function (major) {
          
          // Wrap to the row above
          if (left + ((col + 1) * (width + inMarg)) > totalWidth) {
            row += 1;
            col = 0;
          }
          
          // Filter for the month in the iteration
          var chartData = dimple.filterData(data, "SchoolName", major);
          
          // Use d3 to draw a text label for the month
          svg
            .append("text")
                .attr("x", left + (col * (width + inMarg)) + (width / 2))
                .attr("y", top + (row * (height + inMarg)) + (height / 2) +4)
                .style("font-family", "sans-serif")
                .style("text-anchor", "middle")
                .style("font-size", "28px")
                .style("opacity", 0.2)
                .text(chartData[0].SchoolName.substring(0, 20));
          
          // Create a chart at the correct point in the trellis
          var myChart = new dimple.chart(svg, chartData);
          myChart.setBounds(
            left + (col * (width + inMarg)),
            top + (row * (height + inMarg)),
            width,
            height);
          
//           Add x and fix ordering so that all charts are the same
          var x = myChart.addCategoryAxis("x", "Year");
            x.addOrderRule(["2016"]);
          
          // Add y and fix scale so that all charts are the same
          var y = myChart.addMeasureAxis("y", "Available");
          y.overrideMax = 3000;
          
          // Draw the bars.  Passing null here would draw all bars with
          // the same color.  Passing owner second colors by owner, which
          // is normally bad practice in a bar chart but works in a trellis.
          // Month is only passed here so that it shows in the tooltip.
          myChart.addSeries(["SchoolName", "Year"], dimple.plot.bar);

// Draw the chart
          myChart.draw();

// Once drawn we can access the shapes
          // If this is not in the first column remove the y text
          if (col > 0) {
            y.shapes.selectAll("text").remove();
          }
//           If this is not in the last row remove the x text
          if (row < 1) {
             x.shapes.selectAll("text").remove();
          }
          // Remove the axis labels
          y.titleShape.remove();
          x.titleShape.remove();

// Move to the next column
          col += 1;

}, this);
    });
  </script>
</div>
</html>

Modified http://d3js.org/d3.v4.min.js to a secure url

Modified http://dimplejs.org/dist/dimple.v2.3.0.min.js to a secure url

https://d3js.org/d3.v4.min.js

https://dimplejs.org/dist/dimple.v2.3.0.min.js