Create Stock Charts in AngularJS

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

To run the example separately and resolve any CORS-related issues, use the Open in Dojo link.

<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