Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Combinational Charts" />
<meta charset=utf-8 />
<title>JS Bin</title>
   <link rel="stylesheet" type="text/css" href="//www.shieldui.com/shared/components/latest/chart/css/shield-chart.min.css" />
    <script type="text/javascript" src="//www.shieldui.com/shared/components/latest/chart/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="//www.shieldui.com/shared/components/latest/chart/js/shield-chart.all.min.js"></script>
  
</head>
<body>
  <div id="chart"></div>  
</body>
</html>
 
​
 
$(function() {
  var LocalData  = [
    { x: 91, y: 144.9, size: 1},
    { x: 33, y: 14.9, size: 71},
    { x: 81, y: 42.9, size: 41},
    { x: 41, y: 34.9, size: 13},
    { x: 67, y: 78.2, size: 113}
];      
  $("#chart").shieldChart({  
​
primaryHeader: {
    text: 'Shield UI Bubble Chart Example',
    align: 'center'
},
    
// Uncomment the following block to reverse the chart  
//-----------------
//isInverted: true,
//-----------------
​
    // Uncomment the following block to enable zooming
//-----------------
zoomMode: "xy",    
//-----------------
    
seriesSettings: {
// Uncomment  the following block to show Data Point Text  
//-----------------
//bubble:{
//      dataPointText: {
//        enabled: true
//      }
//  }
//-----------------  
},    
//Uncomment Following block of code to enable tooltips formatting    
//    tooltipSettings: {
//      customHeaderText: 'Current Point:',
//      customPointText: function (point, chart) {
//        return shield.format(
//          '<span style="color:{color}">Formatted text: <b>{point.x}</b><br/>Formatted Text:<b>{point.y}</b></span>',
//          {
//            point: point,
//            color: point.size > 87 ? 'red' : 'green'
//          }
//        );
//      }
//    },
    
    
dataSeries: [
  
  {
seriesType: 'bubble',
collectionAlias: 'Series A',
// Using Local Data Binding    
data: LocalData
  }, 
  {
seriesType: 'bubble',
collectionAlias: 'Series B',
data: [
  {
    x: 31.45,
    y: 26.4,
    size: 22
  },
  {
    x: 20.69,
    y: 160.8,
    size: 60.8
  },
  {
    x: 60.02,
    y: 86.8,
    size: 86.8
  },
  {
    x: 101.3,
    y: 100,
    size: 100
  },
  {
    x: 151.7,
    y: 112,
    size: 112
  }
]    
  } 
]
  });
  
  });
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
bailey_mark77pro
0viewers