Combo Chart Example

An example of a Google Combo Chart.

by kunalvashist

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
   <svg width="960" height="500"></svg>

CSS

.bar { fill: steelblue; }
.tick line {
    fill: none;
    stroke: #ddd;
}

JavaScript

var data = [{
  text:"9a",
  score:"30"
},
{
  text:"10a",
  score:"80"
},
{
  text:"11a",
  score:"40"
},
{
  text:"12p",
  score:"80"
}]


var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    animationDelay = 100;

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scale.ordinal().rangeRoundBands([0, width], ".6");
var y = d3.scale.linear().range([height, 0]);
var colors = ['#cb4335'];
 var color = d3.scale.ordinal().range(colors);
var xAxis = d3.svg.axis()
                        .scale(x)
                        .orient("bottom")
                        .outerTickSize(0);
 var yAxis = d3.svg.axis()
                        .scale(y)
                        .orient("left");
var yAxisRight = d3.svg.axis()
                        .scale(y)
                        .orient("right")
                        .outerTickSize(0)
                        .ticks(0)
                        .tickFormat(function(d, i) {
                            return '';
                        });
x.domain(data.map(function(d) { return d.text; }));
y.domain([0, 100]);
function make_y_axis() {
      return d3.svg.axis()
          .scale(y)
          .orient("left");
  }        

                    svg.selectAll('g.axis').remove();
                    svg.selectAll('.bar').remove();
                    svg.selectAll('g.grid').remove();

                    svg.append("g")
                        .attr("class", "x axis")
                        .attr("transform", "translate(0," + height + ")")
                        .call(xAxis);


                    svg.append("g")
                        .attr("class", "y axis")
                        .call(yAxis);

                    svg.append("g")
                        .attr("class", "grid")
                       ...