Demo - Chart Elements

by Reece Gallaway

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.min.js"></script>
<script src="https://demos.wijmo.com/5/PureJS/FlexChartIntro/FlexChartIntro/scripts/vendor/wijmo.input.min.js"></script>
<select id="typeMenu">
    <option value="0" selected="selected">Column</option>
    <option value="1">Bar</option>
    <option value="2">Scatter</option>
    <option value="3">Line</option>
    <option value="4">LineSymbols</option>
    <option value="5">Area</option>
    <option value="9">Spline</option>
    <option value="10">SplineSymbols</option>
    <option value="11">SplineArea</option>
</select>
<select id="stackingMenu">
    <option value="0" selected="selected">None</option>
    <option value="1">Stacked</option>
    <option value="2">Stacked 100%</option>
</select>
<select id="rotatedMenu">
    <option value="false" selected="selected">False</option>
    <option value="true">True</option>
</select>
<button id="refreshBut" data-bind="click: refreshMe">
Refresh
</button>

<div id="chartExample1"></div>
<div id="chartExample2"></div>

CSS

.wj-flexchart {
  height: 300px;
}

.wj-data-label {
  font-size: 75%;
  opacity: 0.9;
}

label {
  width: 150px;
  text-align: right;
}

.wj-control {
  margin-bottom: 3px;
}

body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {
  var self = this;

  self.useShortNames = true;

  self.longNames = [
    { name: 'Really Really Really Really Long Name For Sales', binding: 'sales' },
    { name: 'Really Really Really Really Long Name For Expenses', binding: 'expenses' },
    { name: 'Really Really Really Really Long Name For Downloads', binding: 'downloads' }];

  self.shortNames = [
    { name: 'Sales', binding: 'sales' },
    { name: 'Expenses', binding: 'expenses' },
    { name: 'Downloads', binding: 'downloads' }];

  // create some random data
  function getData() {
    var ages = '60,61,62,63,64,65,66,67,68,69,70'.split(','),
        data = [];
    for (var i = 0; i < ages.length; i++) {
      data.push({
        country: ages[i],
        sales: (Math.random()) * 10000,
        expenses: (Math.random() ) * 5000,
        downloads: Math.round(Math.random() * 20000),
      });
    }
    return data;
  }
  
    function getData2() {
    var countries = '60,61,62,63,64,65,66,67,68,69,70'.split(','),
        data = [];
    for (var i = 0; i < countries.length; i++) {
      data.push({
        country: countries[i],
        sales: (Math.random()) * 10000,
        downloads: Math.round(Math.random() * 20000),
      });
    }
    return data;
  }
  
  self.ctChart1 = new wijmo.chart.FlexChart('#chartExample1', {
    header:"Test",
    itemsSource: getData(),
    bindingX: 'country',
    legend: {
      position: 4
    },
    series: self.shortNames
  });

  self.ctChart2 = new wijmo.chart.FlexChart('#chartExample2', {
    header:"Test",
    itemsSource: getData(),
    bindingX: 'country',
    legend: {
      position: 4
    },
    series: self.longNames
  });

  var typeMenu = new wijmo.input.Menu('#typeMenu', {
    itemClicked: function (s, e) {
      ctChart1.chartType = parseInt(s.selectedValue);
      ctChart2.chartType = parseInt(s.selectedValue);
      updateMenuHeader(s, 'Chart Type');
    }
  });

  //updateMenuHeader(typeMenu, 'Chart Type');
  var stackingMenu =...