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="Angular + KendoUI DataViz" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
  <script src="https://rawgithub.com/lhoeppner/angular-kendo/ds-watch/angular-kendo.js"></script>
  
  
  
​
  <link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
    <link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css">
  
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-app="chart-example">
  <div ng-controller="ChartController">    
    <select id='date' kendo-drop-down-list k-data-source="countries" k-data-text-field="'category'" k-data-value-field="'value'"></select>
​
​
<input ng-model='countries.data[0].category' />
 <input ng-model='countries.data[0].value' />   
              <div kendo-chart k-options="pie" k-data-source="countries" />
    
  </div>
</body>
</html>
 
var app = angular.module('chart-example', ['kendo.directives']);
​
function ChartController($scope) {
  $scope.pie = {
    title: {
        position: "bottom",
        text: "Share of Internet Population Growth, 2007 - 2012"
    },
    legend: {
        visible: false
    },
    chartArea: {
        background: ""
    },
    seriesDefaults: {
        labels: {
            visible: true,
            background: "transparent",
            template: "#= category #: #= value#%"
        }
    },
    series: [{
        type: "pie",
        field: "value",
        categoryField: "category"
    }],
    tooltip: {
        visible: true,
        format: "{0}%"
    }
  };
​
    $scope.countries = {
        data: [{
            category: "Asia",
            value: 53.8,
            color: "#9de219"
        }, {
            category: "Europe",
            value: 16.1,
            color: "#90cc38"
        }, {
            category: "Latin America",
            value: 11.3,
            color: "#068c35"
        }, {
            category: "Africa",
            value: 9.6,
            color: "#006634"
        }, {
            category: "Middle East",
            value: 5.2,
            color: "#004d38"
        }, {
            category: "North America",
            value: 3.6,
            color: "#033939"
        }]
    };
}
Output

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

Dismiss x
public
Bin info
lhoeppnerpro
0viewers