New to Kendo UI for jQuery? Download free 30-day trial

Create Stock Chart Navigator in Categorical Charts

Environment

Product Progress Kendo UI Chart
Operating System All
Browser All
Browser Version All

Description

How can I implement a stock navigator inside a convetional categorical chart such as the Kendo UI LineChart?

Solution

Your project might require you to create a secondary chart that should show a subset of data from the main chart. The secondary chart will be created based on the selected categories from the main chart, therefore, the chart.categoryAxis.select option has to be added.

After the user interacts with the selector, recreate the secondary chart in order to depict the newly selected subset of data.

The following example demonstrates how to implement a stock navigator with the categorical Kendo UI LineChart.

<div id="example">
      <div class="demo-section k-content">
        <div id="chart"></div>
        <div id="detailchart"></div>
      </div>
      <div class="box">
        <h4>Mousewheel</h4>
        <div class="box-col" style="width: 500px;">
          <ul class="options">
            <li>
              <input id="reverse" type="checkbox" />
              <label for="reverse">Reverse</label>
            </li>
          </ul>
        </div>
        <div class="box-col">
          <ul class="options">
            <li>
              <label for="zoom">Zoom direction</label>
              <select id="zoom">
                <option value="both">Both</option>
                <option value="left">Left</option>
                <option value="right">Right</option>
              </select>
            </li>
          </ul>
        </div>
      </div>
      <script>
        function createChart() {
          $("#chart").kendoChart({
            title: {
              text: "Olympic Medals won by USA"
            },
            legend: {
              position: "bottom"
            },
            seriesDefaults: {
              type: "line"
            },
            series: [{
              name: "Gold Medals",
              data: [40, 32, 34, 36, 45, 33, 34, 42, 83, 36, 37, 44, 37, 35, 36, 46],
              color: "#f3ac32"
            }, {
              name: "Silver Medals",
              data: [19, 25, 21, 26, 28, 31, 35, 46, 60, 31, 34, 32, 24, 40, 38, 29],
              color: "#b8b8b8"
            }, {
              name: "Bronze Medals",
              data: [17, 17, 16, 28, 34, 30, 25, 55, 30, 27, 37, 25, 33, 26, 36, 29],
              color: "#bb6e36"
            }],
            categoryAxis: {
              categories: [1952, 1956, 1960, 1964, 1968, 1972, 1976, 1980, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012],
              majorGridLines: {
                visible: false
              },
              select: {
                from: 2,
                to: 5
              }
            },
            selectStart: onSelectStart,
            select: onSelect,
            selectEnd: onSelectEnd
          });
        }

        function createDetailChart(from, to, yearfrom, yearto) {
          var goldmedalsdata = [40, 32, 34, 36, 45, 33, 34, 83, 36, 37, 44, 37, 35, 36, 46];
          var goldmedalsforperiod = goldmedalsdata.slice(from, to);

          var silvermedalsdata = [19, 25, 21, 26, 28, 31, 35, 60, 31, 34, 32, 24, 40, 38, 29];
          var silvermedalsforperiod = silvermedalsdata.slice(from, to);

          var bronzemedalsdata = [17, 17, 16, 28, 34, 30, 25, 30, 27, 37, 25, 33, 26, 36, 29];
          var bronzemedalsforperiod = bronzemedalsdata.slice(from, to);

          var categoriesforperiod = [];

          var startYear = yearfrom;

          while (yearfrom <= yearto)
          {
            categoriesforperiod.push(yearfrom);
            yearfrom = yearfrom + 4;
          }

          $("#detailchart").kendoChart({
            title: {
              text: "Olympic Medals won from " + startYear + " to "  + yearto
            },
            legend: {
              position: "bottom"
            },
            seriesDefaults: {
              type: "line"
            },
            series: [{
              name: "Gold Medals",
              data: goldmedalsforperiod,
              color: "#f3ac32"
            }, {
              name: "Silver Medals",
              data: silvermedalsforperiod,
              color: "#b8b8b8"
            }, {
              name: "Bronze Medals",
              data: bronzemedalsforperiod,
              color: "#bb6e36"
            }],
            categoryAxis: {
              categories: categoriesforperiod,
              majorGridLines: {
                visible: false
              }
            }
          });
        }

        function formatRange(e) {
          var categories = e.axis.categories;
          createDetailChart(e.from, e.to, categories[e.from], categories[e.to - 1]);
          return kendo.format("{0} - {1} ({2} - {3})",
                              e.from, e.to,
                              categories[e.from],
                              // The last category included in the selection is at (to - 1)
                              categories[e.to - 1]
                             );
        }

        function onSelectStart(e) {
          setTimeout(function(){ // ensure that the selection has finished before rendering the seconary chart
            formatRange(e);
          });
        }

        function onSelect(e) {
         setTimeout(function(){ // ensure that the selection has finished before rendering the seconary chart
            formatRange(e)
          });
        }

        function onSelectEnd(e) { 
         setTimeout(function(){ // ensure that the selection has finished before rendering the seconary chart
            formatRange(e)
          });
        }

        function setOptions() {
          var chart = $("#chart").data("kendoChart");

          $.extend(true /* deep */, chart.options, {
            categoryAxis: {
              select: {
                mousewheel: {
                  reverse: $("#reverse").prop("checked"),
                  zoom: $("#zoom").val()
                }
              }
            }
          });

          chart.refresh();
        }

        $("#reverse, #zoom").click(setOptions);

        $(document).ready(createChart);
        $("#example").bind("kendo:skinChange", createChart);

      </script>

See Also

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