(For more resources related to this topic, see here.)

Creating a chart to show stock history

The Kendo UI library provides a specialized chart widget that can be used to display the stock price data for a particular stock over a period of time. In this recipe, we will take a look at creating a Stock chart and customizing it.

Getting started

Include the CSS files, kendo.dataviz.min.css and kendo.dataviz.default.min.css, in the head section. These files are used in styling some of the parts of a stock history chart.

How to do it…

A Stock chart is made up of two charts: a pane that shows you the stock history and another pane that is used to navigate through the chart by changing the date range.

The stock price for a particular stock on a day can be denoted by the following five attributes:

• Open: This shows you the value of the stock when the trading starts for the day
• Close: This shows you the value of the stock when the trading closes for the day
• High: This shows you the highest value the stock was able to attain on the day
• Low: This shows you the lowest value the stock reached on the day
• Volume: This shows you the total number of shares of that stock traded on the day

Let's assume that a service returns this data in the following format:

[
    {
    "Date"  : "2013/01/01",
    "Open"  : 40.11,
    "Close" : 42.34,
    "High"  : 42.5,
    "Low"   : 39.5,
    "Volume": 10000
    }
  .
  .
  .
]

We will use the preceding data to create a Stock chart. The kendoStockChart function is used to create a Stock chart, and it is configured with a set of options similar to the area chart or Column chart. In addition to the series data, you can specify the navigator option to show a navigation pane below the chart that contains the entire stock history:

$("#chart").kendoStockChart({
  title: {
    text: 'Stock history'
  },

  dataSource: {
    transport: {
      read: '/services/stock?q=ADBE'
    }
  },

  dateField: "Date",

  series: [{
    type: "candlestick",
    openField: "Open",
    closeField: "Close",
    highField: "High",
    lowField: "Low"
  }],

  navigator: {
    series: {
      type: 'area',
      field: 'Volume'
    }
  }
});

In the preceding code snippet, the DataSource object refers to the remote service that would return the stock data for a set of days. The series option specifies the series type as candlestick; a candlestick chart is used here to indicate the stock price for a particular day. The mappings for openField, closeField, highField, and lowField are specified; they will be used in plotting the chart and also to show a tooltip when the user hovers over it. The navigator option is specified to create an area chart, which uses volume data to plot the chart. The dateField option is used to specify the mapping between the date fields in the chart and the one in the response.

How it works…

When you load the page, you will see two panes being shown; the navigator is below the main chart. By default, the chart displays data for all the dates in the DataSource object, as shown in the following screenshot:

In the preceding screenshot, a candlestick chart is created and it shows you the stock price over a period of time. Also, notice that in the navigator pane, all date ranges are selected by default, and hence, they are reflected in the chart (candlestick) as well. When you hover over the series, you will notice that the stock quote for the selected date is shown. This includes the date and other fields such as Open, High, Low, and Close.

The area of the chart is adjusted to show you the stock price for various dates such that the dates are evenly distributed. In the previous case, the dates range from January 1, 2013 to January 31, 2013. However, when you hover over the series, you will notice that some of the dates are omitted. To overcome this, you can either increase the width of the chart area or use the navigator to reduce the date range. The former option is not advisable if the date range spans across several months and years.

To reduce the date range in the navigator, move the two date range selectors towards each other to narrow down the dates, as shown in the following screenshot:

When you try to narrow down the dates, you will see a tooltip in the chart, indicating the date range that you are trying to select. The candlestick chart is adjusted to show you the stock price for the selected date range. Also, notice that the opacity of the selected date range in the navigator remains the same while the rest of the area's opacity is reduced. Once the date range is selected, the selected pane can be moved in the navigator.

There's more…

There are several options available to you to customize the behavior and the look and feel of the Stock Chart widget.

Specifying the date range in the navigator when initializing the chart

By default, all date ranges in the chart are selected and the user will have to narrow them down in the navigator pane. When you work with a large dataset, you will want to show the stock data for a specific range of date when the chart is rendered. To do this, specify the select option in navigator:

navigator: {
  series: {
    type: 'area',
    field: 'Volume'
  },
  select: {
    from: '2013/01/07',
    to: '2013/01/14'
  }
}

In the previous code snippet, the from and to date ranges are specified. Now, when you render the page, you will see that the same dates are selected in the navigator pane.

Customizing the look and feel of the Stock Chart widget

There are various options available to customize the navigator pane in the Stock Chart widget. Let's increase the height of the pane and also include a title text for it:

navigator: {
  .
  .
  pane: {
    height: '50px',
    title: {
      text: 'Stock Volume'
    }
  }
}

Now when you render the page, you will see that the title and height of the navigator pane have been increased.

Using the Radial Gauge widget

The Radial Gauge widget allows you to build a dashboard-like application wherein you want to indicate a value that lies in a specific range. For example, a car's dashboard can contain a couple of Radial Gauge widgets that can be used to indicate the current speed and RPM.

How to do it…

To create a Radial Gauge widget, invoke the kendoRadialGauge function on the selected DOM element. A Radial Gauge widget contains some components, and it can be configured by providing options, as shown in the following code snippet:

$("#chart").kendoRadialGauge({
  
  scale: {
    startAngle: 0,
    endAngle: 180,
    min: 0,
    max: 180
  },

  pointer: {
    value: 20
  }

});

Here the scale option is used to configure the range for the Radial Gauge widget. The startAngle and endAngle options are used to indicate the angle at which the Radial Gauge widget's range should start and end. By default, its values are 30 and 210, respectively. The other two options, that is, min and max, are used to indicate the range values over which the value can be plotted. The pointer option is used to indicate the current value in the Radial Gauge widget.

There are several options available to configure the Radial Gauge widget; these include positioning of the labels and configuring the look and feel of the widget.

How it works…

When you render the page, you will see a Radial Gauge widget that shows you the scale from 0 to 180 and the pointer pointing to the value 20.

Here, the values from 0 to 180 are evenly distributed, that is, the major ticks are in terms of 20. There are 10 minor ticks, that is, ticks between two major ticks. The widget shows values in the clockwise direction. Also, the pointer value 20 is selected in the scale.

There's more…

The Radial Gauge widget can be customized to a great extent by including various options when initializing the widget.

Changing the major and minor unit values

Specify the majorUnit and minorUnit options in the scale:

scale: {
  startAngle: 0,
  endAngle: 180,
  min: 0,
  max: 180,
  majorUnit: 30,
  minorUnit: 10,
}

The scale option specifies the majorUnit value as 30 (instead of the default 20) and minorUnit as 10. This will now add labels at every 30 units and show you two minor ticks between the two major ticks, each at a distance of 10 units, as shown in the following screenshot:

The ticks shown in the preceding screenshot can also be customized:

scale: {
  .
  .
  minorTicks: {
    size: 30,
    width: 1,
    color: 'green'
  },
  majorTicks: {
    size: 100,
    width: 2,
    color: 'red'
  }
}

Here, the size option is used to specify the length of the tick marker, width is used to specify the thickness of the tick, and the color option is used to change the color of the tick.

Now when you render the page, you will see the changes for the major and minor ticks.

Changing the color of the radial using the ranges option

The scale attribute can include the ranges option to specify a radial color for the various ranges on the Radial Gauge widget:

scale: {
  .
  .
  ranges: [
    {
      from: 0,
      to: 60,
      color: '#00F'
    }, {
      from: 60,
      to: 130,
      color: '#0F0'
    }, {
      from: 130,
      to: 200,
      color: '#F00'
    }
  ]
}

In the preceding code snippet, the ranges array contains three objects that specify the color to be applied on the circumference of the widget. The from and to values are used to specify the range of tick values for which the color should be applied.

Now when you render the page, you will see the Radial Gauge widget showing the colors for various ranges along the circumference of the widget, as shown in the following screenshot:

In the preceding screenshot, the startAngle and endAngle fields are changed to 10 and 250, respectively. The widget can be further customized by moving the labels outside. This can be done by specifying the labels attribute with position as outside.

In the preceding screenshot, the labels are positioned outside, hence, the radial appears inside.

Updating the pointer value using a Slider widget

The pointer value is set when the Radial Gauge widget is initialized. It is possible to change the pointer value of the widget at runtime using a Slider widget. The changes in the Slider widget can be observed, and the pointer value of the Radial Gauge can be updated accordingly.

Let's use the Radial Gauge widget. A Slider widget is created using an input element:

<input id="slider" value="0" />

The next step is to initialize the previously mentioned input element to a Slider widget:

$('#slider').kendoSlider({
  min: 0,
  max: 200,
  showButtons: false,
  smallStep: 10,
  tickPlacement: 'none',
  change: updateRadialGuage
});

The min and max values specify the range of values that can be set for the slider. The smallStep attribute specifies the minimum increment value of the slider. The change attribute specifies the function that should be invoked when the slider value changes.

The updateRadialGuage function should then update the value of the pointer in the Radial Gauge widget:

function updateRadialGuage() {
   $('#chart').data('kendoRadialGauge')
           .value($('#slider').val());
}

The function gets the instance of the widget and then sets its value to the value obtained from the Slider widget.

Here, the slider value is changed to 100, and you will notice that it is reflected in the Radial Gauge widget.