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 />
      <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.rtl.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
​
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<title>JS Bin</title>
</head>
<body>
  <div id="chart"></div>
</body>
</html>
 
var internetUsers = [
  {
    "country": "Spain",
    "year": "Cat1",
    "unit": "GWh",
    "solar": 2578,
    "hydro": 26112,
    "wind": 32203,
    "nuclear": 58973
  },
  {
    "country": "Spain",
    "year": "Cat2",
    "unit": "GWh",
    "solar": 508,
    "hydro": 30522,
    "wind": 27568,
    "nuclear": 55103
  },
  {
    "country": "Spain",
    "year": "Cat3",
    "unit": "GWh",
    "solar": 119,
    "hydro": 29831,
    "wind": 23297,
    "nuclear": 60126
  },
  {
    "country": "Spain",
    "year": "Cat4",
    "unit": "GWh",
    "solar": 41,
    "hydro": 23025,
    "wind": 21176,
    "nuclear": 57539
  },
  {
    "country": "Spain",
    "year": "Cat4",
    "unit": "GWh",
    "solar": 56,
    "hydro": 34439,
    "wind": 15700,
    "nuclear": 63606
  }
];
  
  $("#chart").kendoChart({
  dataSource: {
  data: internetUsers
  },
  title: {
  text: "Internet Users in United States"
  },
  legend: {
  visible: false
  },
  seriesDefaults: {
  type: "line",
  labels: {
  visible: true,
  format: "{0}%",
  background: "transparent"
  }
  },
  series: [{
  field: "nuclear",
  name: "Nuclear"
  }, {
  field: "hydro",
  name: "Hydro"
  }],
    valueAxis: {
      labels: {
        format: "{0}%"
      },
        line: {
          visible: false
        }
    },
      categoryAxis: {
        field: "year"
      }
});
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers