CODEWITHSUNDEEP
d3.jsdimple.js
hmmmbob
hmmmbob

Reputation: 1177

d3.js , dimple , getting a title on a graph

I am using a dimple template but could not find the command for a title. So i just looked up a d3 command for it and added it to my code. Unfortunately, the title is not shown. Can somebody spot my mistake ? 

<html>
<head>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"></script>
</head>
<body>
<div id="chartContainer">
  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 590, 400);
      d3.tsv("bbd3.tsv", function (data) {
        var myChart = new dimple.chart(svg, data);
        myChart.setBounds(75, 30, 490, 330)
        var myAxisx = myChart.addMeasureAxis("x", "HR");

        myAxisx.overrideMin = 35;
        myAxisx.overrideMax = 75;
        myAxisx.title = "averaged Number of Home Runs";
        var myAxisy = myChart.addMeasureAxis("y", "avg");
        myAxisy.overrideMin = 0.23;
        myAxisy.overrideMax = 0.255;
        myAxisy.title = "Batting average in % averaged over all players";            var mySeries = myChart.addSeries( ["handedness"], dimple.plot.bubble);
        mySeries.aggregate = dimple.aggregateMethod.avg;
        myChart.addLegend(180, 10, 360, 20, "left");
        myChart.draw();
        svg.append("text")
        .attr("x", (width / 2))             
        .attr("y", 0 - (margin.top / 2))
        .attr("text-anchor", "middle")  
        .style("font-size", "16px") 
        .style("text-decoration", "underline")  
        .text("Value vs Date Graph");
      });
  </script>
</div>
</body>
</html>

Upvotes: 0

Views: 497

Answers (1)

John Kiernander
John Kiernander

Reputation: 4904

I can't see any declaration for the margin and width variables you use to place the title. As your chart definition is fixed size anyway you can replace it with:

svg.append("text")
    .attr("x", 295)             
    .attr("y", 30)
    .attr("text-anchor", "middle")  
    .style("font-size", "16px") 
    .style("text-decoration", "underline")  
    .text("Value vs Date Graph");

Upvotes: 1

Related Questions