Chart Widget

For Kendo UI

by David Kyle

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.917/styles/kendo.material.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.917/styles/kendo.common.min.css">
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>
<div class="container-fluid bg-white m-1">
  <div class="row">
    <div class="col-xl-12 col-lg-12 col-md-10 col-sm-10 col-xs-6">
      <div class="h1 k-header rounded text-center">
        <h1>
          Chart Demo
        </h1>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xl-12 col-lg-12 col-md-10 col-sm-10 col-xs-6">
      <div class="row">
        <div class="col">
          <div class="h2">
            <h2>
              Chart Options
            </h2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-6">
          <div class="row">
            <div class="col-2">
              <label for="chartTitle">Title:</label>
            </div>
            <div class="col">
              <input type="text" class="form-control" name="chartTitle" id="chartTitle" />
            </div>
          </div>
          <div class="row">
            <div class="col-2">
              <label for="chartType">Type:</label>
            </div>
            <div class="col">
              <select name="chartType" class="custom-select" id="chartType">
                <option value="">--Select--</option>
                <option value="area">Area</option>
                <option value="bar">Bar</option>
                <option value="bubble">Bubble</option>
                <option value="bullet">Bullet</option>
     ...

JavaScript

'use strict';

let Charting = (function() {
  let charts = {};

  /**
   * Creates a new chart
   * param {chartOptions} config - The configuration options for the chart
   */
  charts.createChart = function(config) {
    let $chart = config.placeHolder;

    $chart.kendoChart({
      theme: 'material',
      title: {
        text: config.titleText
      },
      valueAxis: {
        min: 0,
        max: 10
      },
      series: [{
        type: config.chartType
      }],
      categoryAxis: {
        data: config.xAxis,
        type: 'date'
      },
      transitions: true
    });
  };

  return charts;
})();

let chartOptions = function(configuration) {
  let options = {
    placeHolder: null,
    titleText: '',
    chartType: ''
  };

  if (!configuration) {
    throw new Error('Unable to intialize chart options with no configuration.');
  }

  if (configuration.title) {
    options.titleText = configuration.title;
  }

  if (configuration.xData) {
    options.xAxis = configuration.xData;
  }

  if (configuration.wrapper) {
    options.placeHolder = configuration.wrapper;
  }

  if (configuration.chartType) {
    options.chartType = configuration.chartType;
  }

  return options;
};

const xAxis = [{
    date: new Date('10/1/2019')
  },
  {
    date: new Date('10/2/2019')
  },
  {
    date: new Date('10/3/2019')
  },
  {
    date: new Date('10/4/2019')
  },
  {
    date: new Date('10/5/2019')
  },
  {
    date: new Date('10/6/2019')
  }
];

$(function() {
  $(document).on('click', '#CreateChartButton', function(e) {
    Charting.createChart(new chartOptions({
      title: $('#chartTitle').val(),
      wrapper: $('.chart-placeholder'),
      chartType: $('#chartType').val(),
      xData: xAxis
    }));
  });
});