Create Stock Charts in AngularJS

The example below demonstrates how to create Kendo UI Stock Charts by using AngularJS.

Use the "Open in Dojo" link to run the example separately and resolve any CORS-related issues.

Example
<div id="example" ng-app="MyApp" ng-controller="MyCtrl">
  <div class="demo-section k-content">
    <div kendo-stock-chart k-data-source="dataSource"       
         k-date-field="dataField"
         k-series="series"
         k-category-axis="categoryAxis"
         k-navigator="navigator"
         k-title="title">
    </div>
  </div>
</div>
<script>
  angular.module("MyApp", [ "kendo.directives" ])
    .controller("MyCtrl", function($scope){

    $scope.dataSource = {
      transport: {
        read: {
          url: "https://demos.telerik.com/kendo-ui/content/dataviz/js/boeing-stock.json",
          dataType: "json"
        }
      }
    };

    $scope.title = {
      text: "The Boeing Company \n (NYSE:BA)"
    };

    $scope.dataField = "Date";

    $scope.series = [{
      type: "candlestick",
      openField: "Open",
      highField: "High",
      lowField: "Low",
      closeField: "Close"
    }];

    $scope.navigator = {
      series: {
        type: "area",
        field: "Close"
      },
      select: {
        from: "2009/02/05",
        to: "2011/10/07"
      }
    };

    $scope.categoryAxis = {
      notes: {
        data: [{
          value: "2001/01/01",
          label: {
            text: "01"
          }
        }, {
          value: "2002/01/01",
          label: {
            text: "02"
          }
        }, {
          value: "2003/01/01",
          label: {
            text: "03"
          }
        }, {
          value: "2004/01/01",
          label: {
            text: "04"
          }
        }, {
          value: "2005/01/01",
          label: {
            text: "05"
          }
        }, {
          value: "2006/01/01",
          label: {
            text: "06"
          }
        }, {
          value: "2007/01/01",
          label: {
            text: "07"
          }
        }, {
          value: "2008/01/01",
          label: {
            text: "08"
          }
        }, {
          value: "2009/01/01",
          label: {
            text: "09"
          }
        }, {
          value: "2010/01/01",
          label: {
            text: "10"
          }
        }, {
          value: "2011/01/01",
          label: {
            text: "11"
          }
        }, {
          value: "2012/01/01",
          label: {
            text: "12"
          }
        }]
      }
    };

  });
</script>

See Also

In this article
Not finding the help you need? Improve this article