Implementing a WYSIWYG report builder using HTML/CSS/JQuery?

Question

I am developing a dashboard that pulls statistics using API's from various platforms such as Google Analytics, Google AdWords, etc.

Once the user has pulled all the data necessary and saved them in a database, the user may conveniently retrieve the statistics and have them displayed on a single screen on the dashboard, along with graphs and other graphical widgets to show trends.

The end result I would like to achieve with this is to have a WYSIWYG report builder, if possible, so the user may design the page's CSS/HTML and save their report templates, and eventually export them to a PDF. I have the CSS elements that I would like to manipulate already created. I would however like to allow the user to choose how those CSS elements are laid out and scaled. However, I am unsure how complicated such an implementation would be, and how to approach implementing such a feature.

I have researched and found out there are JQuery plugins that allow for dragging/resizing of CSS elements as such:

http://jsfiddle.net/Ja4dY/1/

$(function() {
    var $foo = $('#foo').resizable().draggable();

    $('#transform').on('click', function() {
        $foo.css({
            '-moz-transform': 'rotate(60deg)',
            '-webkit-transform': 'rotate(60deg)',
            '-ms-transform': 'rotate(60deg)'
        });
    });
});

Would it be possible to save a manipulated page as a template? I am assuming I will need to use another plugin to export the HTML page as a PDF.

Are there any existing tools that do something similar? In a nutshell, I am looking to implement a reporting tool that saves customized templates and exports to PDF. I've tried looking around but came up with nothing, so I am wondering if the community knows of any tools or combination of tools that may achieve this.

My apologies for any confusion in regards to my question. Thank you in advance!

Answer 1

Updated fiddle at http://jsfiddle.net/Ja4dY/260/ Watch the console after clicking 'Save', you can post that data easily. In case the code vanish, here is a backup:

HTML part:

<button id="rotate_left">Rotate left</button>
<button id="rotate_right">Rotate right</button>
<button id="save">Save</button>
<div class="template_area">
    <div id="foo" class="template_box">Hello</div>
    <div id="other" class="template_box">What's this?</div>
</div>

Styles:

.template_area {
    position: relative;
    margin-top: 30px;
    background: none #efefef;
    height: 300px;
}
#foo {
    border: 2px solid red;
    width: 200px;
    height: 150px;
    position: absolute;
    top: 150px;
    left: 50px;

}

#other {
    border: 2px solid blue;
    width: 150px;
    height: 50px;
    position: absolute;
    top: 100px;
    left: 50px;
}
.selected_box {
     border: 1px solid green !important;   
}

Script:

var selectedBox = false;
$(function() {
    $('.template_box').resizable().draggable();

    $('.template_box').on('click', function(e) {
        var thisElement = $(this); 
        $('.template_box').removeClass('selected_box');
        thisElement.addClass('selected_box');
        selectedBox = thisElement;
    });
    function rotateElement( degree ) {
        if ( !selectedBox.data('rotate') ) {
            selectedBox.data('rotate', 0);
        };
        selectedBox.data('rotate', selectedBox.data('rotate')+degree);
        selectedBox.css({
            '-moz-transform': 'rotate(' + selectedBox.data('rotate') + 'deg)',
            '-webkit-transform': 'rotate(' + selectedBox.data('rotate') + 'deg)',
            '-ms-transform': 'rotate(' + selectedBox.data('rotate') + 'deg)'
        });
    };
    $('#rotate_left').on('click', function(e) {
        if ( selectedBox ) {
            rotateElement( -30 );
        };
    });
    $('#rotate_right').on('click', function(e) {
        if ( selectedBox ) {
            rotateElement( 30 );
        };
    });
    $('#save').on('click', function() {
        var toPost = [];
        $('.template_box').each(function(i) {
            var thisBox = $(this);
            var id = thisBox.attr('id');
            var left = thisBox.position().left;
            var top = thisBox.position().top;
            var rotate = thisBox.data('rotate') || 0;
            var data = {
                'id': id,
                'left': left,
                'top': top,
                'rotate': rotate
            };
            toPost.push( data );
        });
        console.log( toPost );
    });
});

This is just an idea, the JS code is not perfect.