@cloudformatter template
A simple starting template for @cloudformatter testing
HTML
<script src="http://www.cloudformatter.com/Resources/Pages/CSS2Pdf/Script/xepOnline.jqPlugin.js"></script>
<script src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['wordtree']}]}"></script>
<div id="buttons" class="buttons"></div>
<hr/>
<div id="JSFiddle">
<div id="chart_div" style="width: 1100px; height: 500px;"></div>
</div>
CSS
.buttons button:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.buttons button:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
button {
color:#111;
background-image: linear-gradient(to bottom,#ffffff 0,#777777 100%);
background-repeat: repeat-x;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
cursor: pointer;
border-width:1px;
border-color: #777;
text-shadow: 0 -1px 0 rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
}
button:hover{
color:#fff;
background-image: linear-gradient(to top,#337ab7 0,#265a88 100%);
}
JavaScript
google.setOnLoadCallback(drawChart);
<!-- This adds the proper namespace on the generated SVG -->
function AddNamespace(){
var svg = jQuery('#chart_div svg');
svg.attr("xmlns", "http://www.w3.org/2000/svg");
svg.css('overflow','visible');
}
<!-- This generates the google chart -->
function drawChart() {
var data = google.visualization.arrayToDataTable(
[ ['Phrases'],
['cats are better than dogs'],
['cats eat kibble'],
['cats eat birds'],
['cats are better than hamsters'],
['cats are awesome'],
['cats are people too'],
['cats eat mice'],
['cats meowing'],
['cats in the cradle'],
['cats eat mice'],
['cats in the cradle lyrics'],
['cats eat kibble'],
['cats for adoption'],
['cats are family'],
['cats eat mice'],
['cats are better than kittens'],
['cats are better than Karl'],
['cats are evil'],
['cats are weird'],
['cats eat mice'],
]
);
var options = {
wordtree: {
format: 'implicit',
word: 'cats'
}
};
var chart = new google.visualization.WordTree(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'ready', AddNamespace);
chart.draw(data, options);
}
<!-- @cloudformatter calls to render the SVG -->
<!-- Convert the SVG to PDF and download it -->
var click="return xepOnline.Formatter.Format('JSFiddle', {render:'download', srctype:'svg'})";
jQuery('#buttons').append('<button...