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 charset=utf-8 /><!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="Container_PolarLine"></div>  
  <br>
  <div id="Container_PolarSpLine"></div>
  <br>
  <div id="Container_PolarArea"></div>  
  <br>
  <div id="Container_PolarSplineArea"></div>
  <br>
  <div id="Container_PolarBar"></div>  
  <br>
  <div id="Container_PolarScatter"></div>  
  
</body>
</html>
<title>JS Bin</title>
</head>
<body>
  
</body>
</html>
 
$(function() {
  $("#Container_PolarLine").shieldChart({  
primaryHeader: {
    text: 'Shield UI Polar Line Chart Example',
    align: 'center'
},
    tooltipSettings: {
      axisMarkers: {
        enabled: true,
        mode: 'xy',
        width: 3,
        zIndex: 3,
        color: 'red'
      }
    },    
    seriesSettings: {
      rangearea: {
        addToLegend: true
      }
    }, 
    dataSeries: [{
      seriesType: "polarline",
      collectionAlias: "Series A",
      data: [20.9, 31.5, 98.4, 101.2, 104.0, 175, 103, 115, 107]   
    },{
      seriesType: "polarline",
      collectionAlias: "Series B",
      data: [45.5,33.6,28,99,116,125,314,117,325]   
    }
  ]    
  });
  $("#Container_PolarSpLine").shieldChart({  
primaryHeader: {
    text: 'Shield UI Polar Spline Chart Example',
    align: 'center'
},
    tooltipSettings: {
      axisMarkers: {
        enabled: true,
        mode: 'xy',
        width: 3,
        zIndex: 3,
        color: 'red'
      }
    },    
    seriesSettings: {
      rangearea: {
        addToLegend: true
      }
    }, 
    dataSeries: [{
      seriesType: "polarspline",
      collectionAlias: "Series A",
      data: [20.9, 31.5, 98.4, 101.2, 104.0, 175, 103, 115, 107]   
    },{
      seriesType: "polarspline",
      collectionAlias: "Series B",
      data: [45.5,33.6,28,99,116,125,314,117,325]   
    }
  ]    
  });  
  $("#Container_PolarArea").shieldChart({  
primaryHeader: {
    text: 'Shield UI Polar Area Chart Example',
    align: 'center'
},
    tooltipSettings: {
      axisMarkers: {
        enabled: true,
        mode: 'xy',
        width: 3,
        zIndex: 3,
        color: 'red'
      }
    },    
    seriesSettings: {
      rangearea: {
        addToLegend: true
      }
    }, 
    dataSeries: [{
      seriesType: "polararea",
      collectionAlias: "Series A",
      data: [20.9, 31.5, 98.4, 101.2, 104.0, 175, 103, 115, 107]   
    },{
      seriesType: "polararea",
      collectionAlias: "Series B",
      data: [45.5,33.6,28,99,116,125,314,117,325]   
    }
  ]    
  });  
  $("#Container_PolarSplineArea").shieldChart({  
primaryHeader: {
    text: 'Shield UI Polar Spline Area  Chart Example',
    align: 'center'
},
    tooltipSettings: {
      axisMarkers: {
        enabled: true,
        mode: 'xy',
        width: 3,
        zIndex: 3,
        color: 'red'
      }
    },    
    seriesSettings: {
      rangearea: {
        addToLegend: true
      }
    }, 
    dataSeries: [{
      seriesType: "polarsplinearea",
      collectionAlias: "Series A",
      data: [20.9, 31.5, 98.4, 101.2, 104.0, 175, 103, 115, 107]   
    },{
      seriesType: "polarsplinearea",
      collectionAlias: "Series B",
      data: [45.5,33.6,28,99,116,125,314,117,325]   
    }
  ]    
  });   
  $("#Container_PolarBar").shieldChart({  
primaryHeader: {
    text: 'Shield UI Polar Bar  Chart Example',
    align: 'center'
},
    tooltipSettings: {
      axisMarkers: {
        enabled: true,
        mode: 'xy',
        width: 3,
        zIndex: 3,
        color: 'red'
      }
    },    
    seriesSettings: {
      rangearea: {
        addToLegend: true
      }
    }, 
    dataSeries: [{
      seriesType: "polarbar",
      collectionAlias: "Series A",
      data: [20.9, 31.5, 98.4, 101.2, 104.0, 175, 103, 115, 107]   
    },{
      seriesType: "polarbar",
      collectionAlias: "Series B",
      data: [45.5,33.6,28,99,116,125,314,117,325]   
    }
  ]    
  });   
  $("#Container_PolarScatter").shieldChart({  
primaryHeader: {
    text: 'Shield UI Polar Scatter Chart Example',
    align: 'center'
},
    tooltipSettings: {
      axisMarkers: {
        enabled: true,
        mode: 'xy',
        width: 3,
        zIndex: 3,
        color: 'red'
      }
    },    
    seriesSettings: {
      rangearea: {
        addToLegend: true
      }
    }, 
    dataSeries: [{
      seriesType: "polarscatter",
      collectionAlias: "Series A",
      data: [[16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0], [16.4, 1.8], [13.6, 0.3], [13.6, 0], [29.9, 0]] 
    },{
      seriesType: "polarscatter",
      collectionAlias: "Series B",
      data: [[27.1, 2.3], [16.4, 0], [13.6, 3.7], [10.9, 5.2], [16.4, 6.5], [10.9, 0], [24.5, 7.1], [10.9, 0], [8.1, 4.7], [19, 0], [21.7, 1.8], [27.1, 0], [24.5, 0], [27.1, 0], [29.9, 1.5], [27.1, 0.8], [22.1, 2]]
    }
  ]    
  });   
 });
​
Output

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

Dismiss x
public
Bin info
bailey_mark77pro
0viewers