Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html><head>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <title>GridSter With HighChart</title>
- <link rel="stylesheet" type="text/css" href="http://gridster.net/dist/jquery.gridster.css">
- <link rel="stylesheet" type="text/css" href="http://gridster.net/demos/assets/demo.css">
- <body>
- <div class="controls">
- <button class="js-resize-random">Resize random widget</button>
- </div>
- <div class="gridster ready">
- <ul style="height: 520px; width: 550px; position: relative;">
- <li class="gs-w" data-row="1" data-col="1" data-sizex="2" data-sizey="4">
- <div id="container" style="width:100%;margin: 0 auto"></div>
- <span class="gs-resize-handle gs-resize-handle-both"></span></li>
- <li class="gs-w" data-row="1" data-col="3" data-sizex="1" data-sizey="2">1<span class="gs-resize-handle gs-resize-handle-both"></span></li>
- <li class="gs-w" data-row="1" data-col="4" data-sizex="1" data-sizey="1">2<span class="gs-resize-handle gs-resize-handle-both"></span></li>
- <li class="gs-w" data-row="3" data-col="2" data-sizex="3" data-sizey="1">3<span class="gs-resize-handle gs-resize-handle-both"></span></li>
- <li class="gs-w" data-row="1" data-col="5" data-sizex="1" data-sizey="3">9<span class="gs-resize-handle gs-resize-handle-both"></span></li>
- </ul>
- </div>
- <script type="text/javascript" src="http://gridster.net/demos/assets/jquery.js"></script>
- <script src="http://gridster.net/dist/jquery.gridster.js" type="text/javascript" charset="utf-8"></script>
- <script src="http://code.highcharts.com/highcharts.js"></script>
- <script src="http://code.highcharts.com/modules/exporting.js"></script>
- <script type="text/javascript">
- function getRandomInt(min, max) {
- return Math.floor(Math.random() * (max - min + 1)) + min;
- }
- </script>
- <script type="text/javascript">
- var gridster;
- $(function(){
- gridster = $(".gridster ul").gridster({
- widget_base_dimensions: [100, 55],
- widget_margins: [5, 5],
- helper: 'clone',
- resize: {
- enabled: true
- }
- }).data('gridster');
- $('.js-resize-random').on('click', function() {
- gridster.resize_widget(gridster.$widgets.eq(getRandomInt(0, 9)),
- getRandomInt(1, 4), getRandomInt(1, 4))
- });
- });
- </script>
- <script>
- $(function () {
- chart = $('#container').highcharts({
- chart: {
- plotBackgroundColor: null,
- plotBorderWidth: null,
- plotShadow: false
- },
- title: {
- text: 'Browser market shares at a specific website, 2010'
- },
- tooltip: {
- pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
- },
- plotOptions: {
- pie: {
- allowPointSelect: true,
- cursor: 'pointer',
- dataLabels: {
- enabled: true,
- color: '#000000',
- connectorColor: '#000000',
- format: '<b>{point.name}</b>: {point.percentage:.1f} %'
- }
- }
- },
- series: [{
- type: 'pie',
- name: 'Browser share',
- data: [
- ['Firefox', 45.0],
- ['IE', 26.8],
- {
- name: 'Chrome',
- y: 12.8,
- sliced: true,
- selected: true
- },
- ['Safari', 8.5],
- ['Opera', 6.2],
- ['Others', 0.7]
- ]
- }]
- });
- });
- </script>
- </body></html>
- gridster = $(".gridster ul").gridster({
- widget_base_dimensions: [100, 55],
- widget_margins: [5, 5],
- helper: 'clone',
- resize: {
- enabled: true,
- stop: function(e, ui, $widget) {
- Highcharts.charts[0].reflow(); // reflow the first chart...
- }
- }
- }).data('gridster');
- var height = $('#HighartsContainer').closest("li").height() - 50; //50: margin, padding, etc
- var width = $('#HighartsContainer').closest("li").width() - 10;
- //you can also set new height or weight of container:
- $('#HighartsContainer').css('height', height);
- self.chart.setSize(width, height, false);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement