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 />
  <title>JS Bin</title>
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
  <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet" />
  <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet" />
  <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css" rel="stylesheet" />
  <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
</head>
<body>
  <div id="product-family-chart"></div>
  <script>
  var dr = [ {
      Client: "",
      Date: "2011-01-01",
      ProductNumber: "2B190",
      ProductName: "PLUG 2ND",
      ProductFamily: "FamilyE",
      Status: "INVOICED",
      Units: -1e4,
      Value: -4100,
      ShippedToDestination: "CHINA"
  }, {
      Client: "",
      Date: "2011-02-01",
      ProductNumber: "2B190",
      ProductName: "PLUG 2ND",
      ProductFamily: "FamilyE",
      Status: "INVOICED",
      Units: 1e4,
      Value: 3500,
      ShippedToDestination: "CHINA"
  }, {
      Client: "",
      Date: "2011-03-01",
      ProductNumber: "4E190",
      ProductName: "LABEL JP",
      ProductFamily: "FamilyE",
      Status: "INVOICED",
      Units: 15e3,
      Value: 957,
      ShippedToDestination: "CHINA"
  }, {
      Client: "",
      Date: "2011-04-01",
      ProductNumber: "4G190",
      ProductName: "FABRIC",
      ProductFamily: "FamilyD",
      Status: "CANCELLED",
      Units: 5e3,
      Value: 3700,
      ShippedToDestination: "CHINA"
  }, {
      Client: "",
      Date: "2011-05-01",
      ProductNumber: "5K190",
      ProductName: "CABLE USB",
      ProductFamily: "FamilyC",
      Status: "OPEN",
      Units: 5e3,
      Value: 4850,
      ShippedToDestination: "CHINA"
  }, {
      Client: "",
      Date: "2011-06-01",
      ProductNumber: "5K190",
      ProductName: "CABLE USB",
      ProductFamily: "FamilyC",
      Status: "OPEN",
      Units: 5e3,
      Value: 5150,
      ShippedToDestination: "CHINA"
  }, {
      Client: "",
      Date: "2011-07-01",
      ProductNumber: "4E190",
      ProductName: "LABEL JP ADAPTER",
      ProductFamily: "FamilyC",
      Status: "INVOICED",
      Units: 1e4,
      Value: 638,
      ShippedToDestination: "CHINA"
  }, {
      Client: "",
      Date: "2011-08-01",
      ProductNumber: "2B190",
      ProductName: "PLUG 2ND",
      ProductFamily: "FamilyB",
      Status: "INVOICED",
      Units: -1e4,
      Value: -4360,
      ShippedToDestination: "CHINA"
  }, {
      Client: "",
      Date: "2011-09-01",
      ProductNumber: "2B190",
      ProductName: "PLUG 2ND",
      ProductFamily: "FamilyB",
      Status: "INVOICED",
      Units: 1e4,
      Value: 4100,
      ShippedToDestination: "CHINA"
  }, {
      Client: "",
      Date: "2011-10-01",
      ProductNumber: "4E190",
      ProductName: "LABEL JP",
      ProductFamily: "FamilyB",
      Status: "INVOICED",
      Units: 1e4,
      Value: 638,
      ShippedToDestination: "CHINA"
  }, {
      Client: "",
      Date: "2011-11-01",
      ProductNumber: "K190.002",
      ProductName: "CABLE DC",
      ProductFamily: "FamilyA",
      Status: "INVOICED",
      Units: 5e3,
      Value: 4860,
      ShippedToDestination: "CHINA"
  }, {
      Client: "",
      Date: "2011-12-01",
      ProductNumber: "AK190.002",
      ProductName: "CABLE USB",
      ProductFamily: "FamilyA",
      Status: "INVOICED",
      Units: 5e3,
      Value: 4850,
      ShippedToDestination: "CHINA"
  } ];
  
  var products = new kendo.data.DataSource({
      data: dr,
      group: {
          field: "ProductFamily",
          aggregates: [ {
              field: "Value",
              aggregate: "sum"
          } ]
      },
      sort: {
          field: "ProductFamily",
          dir: "asc"
      },
      change: createChart
  });
  
  function createChart() {
      var view = products.view();
      var families = $.map(view, function(v) {
          return v.value;
      });
      var values = $.map(view, function(v) {
          return v.aggregates.Value.sum;
      });
      console.log(families, values);
      $("#product-family-chart").kendoChart({
          title: {
              text: "Product Family (past 12 months)"
          },
          seriesDefaults: {
              overlay: {
                  gradient: "none"
              },
              markers: {
                  visible: false
              },
              majorTickSize: 0,
              opacity: .8
          },
          series: [ {
              type: "column",
              data: values
          } ],
          valueAxis: {
              line: {
                  visible: false
              },
              labels: {
                  format: "${0}",
                  skip: 2,
                  step: 2,
                  color: "#727f8e"
              }
          },
          categoryAxis: {
              categories: families
          },
          legend: {
              visible: false
          },
          tooltip: {
              visible: true,
              format: "Value: ${0:N0}"
          }
      });
  }
  
  $(function() {
      products.fetch();
  });
  </script>
</body>
</html>
​
 
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers