javascriptdimple.js

How to show full xAxis title in dimple.js?

This is my dimple line chart (powered by d3): but the xAxis ltitle overlap with xAxis title like the image enter image description here

how to show the full xAxis title and not to overlap with the xAxis text?

Then I have this code in a php file:

var svg = dimple.newSvg("#chartContainer", 600, 400),
data = [
    { "Value" : 4, "timestamp" : 09:33:00},
    { "Value" : 10, "timestamp" : 09:33:05},
    { "Value" : 2, "timestamp" : 09:33:50},
    { "Value" : 1, "timestamp" : 09:34:00},
    { "Value" : 5, "timestamp" : 09:34:20},
    { "Value" : 6, "timestamp" : 09:35:00}
];


// Draw a standard chart using the aggregated data

var chart = new dimple.chart(svg, data);
chart.setBounds(60, 30, 700, 300);
var x = chart.addCategoryAxis("x", "timestamp");
 x.title = "per 5 seconds";
 x.addOrderRule("Year");
var y = chart.addCategoryAxis("y", "Value");
var s = chart.addSeries(["Volume", "timestamp"], dimple.plot.bubble);

// Add a thick line with markers
  var lines = chart.addSeries(null, dimple.plot.line);
  lines.lineWeight = 5;
  lines.lineMarkers = true;
  chart.draw();
  x.shapes.selectAll("text").attr("transform",
function (d) {
  return d3.select(this).attr("transform") + " rotate(45)";
});

Could anybody help me with this? Is it possible to do it in a way I am trying? It would be great if you could point me to some worked out examples or tutorials

1:

Solution

  • You have to change your rotate(45)to set custom coordinates. Thankfully, this is very easy to do by using rotate(45,0,0) where you set 0,0 according to your needs. Especially the second parameter moves your labels up and down.

    here's a working pen to try it out. Just try to use rotate(45,-10,0) or rotate(45,10,0) to see what happens:

    http://codepen.io/anon/pen/JEbKRN?editors=1111

    (i felt free to add "" to your dates in the array to make things work)

    and here are the examples of dimple you perhaps searched for: http://dimplejs.org/examples_index.html

    disclaimer: I never used dimple before, just d3. There might be a better "dimple" way, but though you are changing the rotation of your labels via D3 nontheless, this might be the best way for you here.

    edit:

    You can get direct access to the x- and y-position of the title label via the following function after drawing the chart:

    x.titleShape.attr("y",
    function (d) {
      return "420"; //you may want to calculate this dynamically.
    });

    for codepen seems down at the moment, here's a working fiddle: http://jsfiddle.net/kue2arnh/3/