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: 1, y: 4.9 },
    { x: 33, y: 14.9 },
    { x: 11, y: 42.9 },
    { x: 41, y: 34.9 },
    { x:17, y: 78.2 }
];      
  $("#chart").shieldChart({  
​
primaryHeader: {
    text: 'Shield UI Scatter 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  
//-----------------
//scatter:{
//      dataPointText: {
//        enabled: true
//      }
//  }
//-----------------  
},    
​
// Uncomment  the following block to show The Axis Marker
//    tooltipSettings: {
//      axisMarkers: {
//        enabled: true,
//        mode: "xy",                        
//        width: 1,
//        zIndex: 3
//      }
//    },   
    
dataSeries: [
  
  {
seriesType: 'scatter',
collectionAlias: 'Series A',
// Using Local Data Binding    
data: LocalData
  }, 
  {
seriesType: 'scatter',
collectionAlias: 'Series B',
data: [[22.4, 10.4], [1.7, 11], [45.4, 8], [9, 17], [11.9, 4], [15.6, 32.2], [12.9, 24.4], [1.9, 9], [1.9, 13.2]]
  } 
]
  });
  
  });
​
Output

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

Dismiss x
public
Bin info
bailey_mark77pro
0viewers