5

I love cubism.js and we use it everyday

I'm defining custom size charts for each device to make use of the full screen size (phone vs desktop) which I really hate

I know from other stack overflow questions that you can do the following to resize the chart whenever resize the window: 

chart = $('#chart');
$(window).on('resize', function() {
    var targetWidth = chart.parent().width();
    chart.attr('width', targetWidth);
    // can we change cubism's context size too?
});

but I also know that this is not possible for cubism because of how we initially set the size in the context: 

context = cubism.context().step(60 * 1000).size(780);

This is how it would look which is expected:

enter image description here

Any suggestions on whether I should look somewhere else in the code? or if I should just deal with the custom sizes?

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204

1 Answers1

0

I not sure whether this will work for you or not but you may want to give it a try.

So as I was saying, I had been playing around with cubism.js and found out that I'm actually able to author the step hence I will also assume/choose to believe that logically it is also possible to author the size of the cubism by doing this:

JS:

// Initialize the step menu's selection.
d3.selectAll("#step option").property("selected", function() {
    return this.value == step;
});

// Update the location on step change.
d3.select("#step").on("change", function() {
    window.location = "?step=" + this.value + "&" + location.search.replace(/[?&]step=[^&]*(&|$)/g, "$1").substring(1);
});

//to alter the step
var step = +cubism.option("step", 864e5);

var context = cubism.context() // set the cubism context
.step((step))
.size(1440);

HTML:

<select id="step">
    <option value="36e5">Hours</option>
    <option value="864e5">Days</option>
</select>

So all you need to do is which step with size then it should allow you to change the size of the cubism dynamically.

edwin
  • 72
  • 8