Highcharts test tool

by Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js">


</script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

<button id="facebook">
    Publish on Facebook
</button>

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}

JavaScript

var chart = Highcharts.chart('container', {

    title: {
        text: 'Highcharts Test'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
        ]
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        type: 'column'
    }]

});

$('#facebook').click(function() {
    function serialize(obj) {
        return Object.keys(obj).map(function(p) {
            return encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]);
        }).join("&");
    }

    function postToFacebook(url) {
    	console.log(chart.options.exporting.url + url);
        var url = chart.options.exporting.url + url,
			title = chart.options.title.text;
        window.open('http://www.facebook.com/sharer.php?u=' + encodeURIComponent(url) + '&t=' +
        	encodeURIComponent(title), 'sharer', 'toolbar=0,status=0,width=626,height=436');
    }
    $.ajax({
        type: 'POST',
        data: serialize({
            svg: chart.getSVGForExport(),
            type: 'image/png',
            async: true
        }),
        url: chart.options.exporting.url,
        success: postToFacebook,
        error: function(e) {
            throw e;
        }
    });
});