StockChart JSP Tag Overview

The Chart JSP tag is a server-side wrapper for the Kendo UI StockChart widget.

Telerik UI for JSP DevCraft image

The StockChart is part of Telerik UI for JSP, a professional grade UI library with 90+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Getting Started

Configuration

Below are listed the steps for you to follow when configuring the Kendo UI StockChart for binding to data, passed as a model attribute in Spring MVC.

Step 1 Make sure you followed all the steps from the introductory article on Telerik UI for JSP.

Step 2 Create a new action method and pass the InternetUsers list as the model.

    @RequestMapping(value = {"/", "/index"}, method = RequestMethod.GET)
    public String index(Model model) {
        model.addAttribute("viewModel", ChartDataRepository.BoeingStockData());

        return "/dataviz/financial/index";
    }

Step 3 Add a server-bound chart.

     <kendo:stockChart name="stockChart" dateField="date">
        <kendo:stockChart-title text="The Boeing Company (NYSE:BA)" />
        <kendo:dataSource data="${viewModel}" />
        <kendo:stockChart-series>
            <kendo:stockChart-seriesItem type="candlestick" openField="open" highField="high" lowField="low" closeField="close" />
        </kendo:stockChart-series>
        <kendo:stockChart-navigator>
            <kendo:stockChart-navigator-series>
                <kendo:stockChart-navigator-seriesItem type="line" field="close" />
            </kendo:stockChart-navigator-series>
        </kendo:stockChart-navigator>
     </kendo:stockChart>

Event Handling

Subscribe to Events

You can subscribe to all events exposed by Kendo UI StockChart by the handler name.

    <kendo:chart name="chart" dateField="date"
                              dataBound="stock_dataBound"
                              seriesClick="stock_seriesClick">
            <kendo:stockChart-title text="The Boeing Company (NYSE:BA)" />
            <kendo:dataSource data="${viewModel}" />
            <kendo:stockChart-series>
                <kendo:stockChart-seriesItem type="candlestick" openField="open" highField="high" lowField="low" closeField="close" />
            </kendo:stockChart-series>
            <kendo:stockChart-navigator>
                <kendo:stockChart-navigator-series>
                    <kendo:stockChart-navigator-seriesItem type="line" field="close" />
                </kendo:stockChart-navigator-series>
            </kendo:stockChart-navigator>
    </kendo:chart>

    <script>
        function stock_dataBound() {
            // Handle the dataBound event
        }

        function stock_seriesClick() {
            // Handle the series click event
        }
    </script>

Reference

Existing Instances

You are able to reference an existing StockChart instance via the jQuery.data(). Once a reference is established, you are able to use the StockChart API to control its behavior.

  // Put this after your Kendo StockChart tag
  <script>
      $(function() {
          // Notice that the Name() of the chart is used to get its client-side instance
          var chart = $("#stockChart").data("kendoChart");
      });
  </script>

See Also

In this article