How to resize chart in Plottable.js

Question

I am using Plottable.js to draw chart on my page. I would like to resize the chart when the window is being resized.

I've tried to set the size via css (as well as svg width and height attribute) with no success.

Here is my attempt to set via svg attribute:

$('#svgSample').attr('width', w);
$('#svgSample').attr('height', h);

Here is my attempt to set via css:

$('#svgSample').css({
    'width': w + 'px',
    'height': h + 'px'
});

Any idea?

Thanks

score 3 · Accepted Answer · answered Oct 15 '15 at 23:41

I believe all you need to do is to call Plot.redraw() after setting svg attributes

here's an example:

window.onload = function() {
    var data = [
        { x: 1, y: 1 },
        { x: 2, y: 1 },
        { x: 3, y: 2 },
        { x: 4, y: 3 },
        { x: 5, y: 5 },
        { x: 6, y: 8 }
    ];
    var xScale = new Plottable.Scales.Linear();
    var yScale = new Plottable.Scales.Linear();

    var plot = new Plottable.Plots.Scatter()
        .addDataset(new Plottable.Dataset(data))
        .x(function(d) { return d.x; }, xScale)
        .y(function(d) { return d.y; }, yScale);

    plot.renderTo("#chart");
    $('#chart').attr('width', 500);
    $('#chart').attr('height', 400);
    plot.redraw();
}

</style> <link rel="stylesheet" type="text/css" href="https://rawgithub.com/palantir/plottable/develop/plottable.css"> <style type="text/css">
body { background-color: #AAA; }
svg { background-color: #FFF; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://rawgithub.com/palantir/plottable/develop/plottable.js"></script>
<svg id="chart" width="100" height="100"></svg>

Yes!!! plot.redraw() works. In fact, it is as simple as doing window.addEventListener("resize", function () { plot.redraw(); }); — Sam, Oct 16 '15 at 00:07

score -1 · Answer 2 · answered Oct 15 '15 at 07:32

-1

Using CSS you can overwrite the width, by using CSS "important" property

Ex: width: 100% !important; apply this to your div and try

answered Oct 15 '15 at 07:32

UI dev www.bijudesigner.com

1
1

score -2 · Answer 3 · answered Oct 16 '15 at 00:14

Thanks to Zoe, I have modified my code to response to redraw on windows resize.

var data = [
    { x: 1, y: 1 },
    { x: 2, y: 1 },
    { x: 3, y: 2 },
    { x: 4, y: 3 },
    { x: 5, y: 5 },
    { x: 6, y: 8 }
];
var xScale = new Plottable.Scales.Linear();
var yScale = new Plottable.Scales.Linear();
var xAxis = new Plottable.Axes.Category(xScale, "bottom");
var yAxis = new Plottable.Axes.Numeric(yScale, "left");

var plot = new Plottable.Plots.Bar()
    .addDataset(new Plottable.Dataset(data))
    .x(function(d) { return d.x; }, xScale)
    .y(function(d) { return d.y; }, yScale);

var chart = new Plottable.Components.Table([
    [yAxis, plotBar],
    [null, xAxis]
]);
chart.renderTo("svg#svgSample");

window.addEventListener("resize", function () {
    plot.redraw();
});

As you can see, I don't even need to worry about setting width and height in css. I think Plottable handle it when calling plot.redraw()!

Thanks Zoe!

How to resize chart in Plottable.js

3 Answers3