[SOLVED] How to resize chart in Plottable.js

How to resize chart in Plottable.js

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

Solution

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>