testpages/ChordChart.html

﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF8">
    <title>Chord Chart</title>
    <script src="../references/d3.js"></script>
    <script src="../references/knockout-3.4.0.js"></script>
    <script src="../build/koextensions.js"></script>
</head>
<body>
    <div id="chordChart" data-bind="chordChart: chordChartData, chartOptions:chordOptions"></div>
    <script>
      var matrix = [
          [0, 20, 10, 30,5],
          [20, 0, 20, 30,15],
          [10, 20, 0, 10,25],
          [30, 30, 10, 0,30],
          [5, 15 ,25 ,30,0]
      ];

      var names = ['CZ', 'FR', 'PL', 'RU','DE'];

      function TestViewModel() {
          var self = this;
          self.chordChartData = ko.observable();

          self.chordOptions = {
              height:500,
              width:500,
              fillParentController:true,
              chordFormat: function(d){
                  return "Some value: " + d
              }
          }
      }

      var vm = new TestViewModel();
      ko.applyBindings(vm);
      vm.chordChartData({
          matrix: matrix,
          names: names
      });
  </script>
</body>
</html>