dx Dynamic Chart Testing

Created a chart using external api and dx chart

by Mark Beharrell

HTML

<script src="https://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn3.devexpress.com/jslib/14.1.13/js/dx.chartjs.js"></script>
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/17.1.5/css/dx.light.css">
<!--<div id="chartContainer" style="max-width:800px;height: 400px;"></div>
<div id="pieChartContainer" style="max-width:800px;height: 400px;"></div>
<div id="barChartContainer" style="max-width:800px;height: 400px;"></div>-->
<div id="dynamicBarChartContainer" style="max-width:800px;height: 400px;"></div>
<!--<form name="cityForm">-->
<div class="selector">
  <select id="citySelect">
    <!--<option value="London,uk">London,uk</option>-->
    <option value="Berlin,de">Berlin,de</option>
    <option value="New York,us">New York,us</option>
    <option value="San Fransisco,us">San Fransisco,us</option>
    <option value="Sydney,au">Sydney,au</option>
    <option value="Paris,fr">Paris,fr</option>
    <option value="Rome,it">Rome,it</option>
    <option value="Istanbul,tr">Istanbul,tr</option>
    <option value="Moscow,ru">Moscow,ru</option>
    <option value="Vladivostok,ru">Vladivostok,ru</option>
    <option value="Tokyo,jp">Tokyo,jp</option>
    <option value="Beijing,cn">Beijing,cn</option>
    <option value="Delhi,in">Delhi,in</option>
    <option value="Cape Town,sa">Cape Town,sa</option>
  </select>
  <button id="submitButton">Submit</button>
  <button id="clearButton">Clear Chart</button>
  <button id="consoleButton">Json Console</button>
</div>
<!--</form>-->

CSS

.selector {
  width: 100%;
  padding: 10px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  float: none;
}

JavaScript

/*$(function() {
  $("#chartContainer").dxChart({
    title: {
      text: 'Test Chart 01',
      margin: 10
    },
    valueAxis: [{
      name: 'yAxis',
      visible: true,
      position: 'right',
      label: {
        text: 'y-Axis',
        visible: true
      },
      title: {
        text: 'y-axis'
      }
    }],
    commonAxisSettings: {
      //label: 'sales'
    },
    argumentAxis: {
      name: 'xAxis',
      visible: true,
      position: 'bottom',
      label: {
        text: 'x-Axis'
      },
      title: {
        text: 'x-axis'
      }
    },
    dataSource: [{
      temperature: 14.2,
      sales: 215
    }, {
      temperature: 11.6,
      sales: 290
    }, {
      temperature: 4,
      sales: 90
    }, {
      temperature: 32,
      sales: 115
    }, {
      temperature: 26,
      sales: 215
    }, {
      temperature: 26.5,
      sales: 160
    }, {
      temperature: 17,
      sales: 120
    }, {
      temperature: 20.1,
      sales: 190
    }, {
      temperature: 22,
      sales: 250
    }, {
      temperature: 11,
      sales: 45
    }],
    series: [{
        type: 'line',
        axis: 'yAxis',
        name: 'line',
        valueField: 'temperature',
        argumentField: 'sales',
        color: 'green'
      },
      //{type: 'bar', axis: 'yAxis', name: 'bar', valueField: 'sales'} 
    ]

  });
});

var pieChartData = [{
  sunshine: 14.2,
  month: 'March'
}, {
  sunshine: 11.6,
  month: 'February'
}, {
  sunshine: 4,
  month: 'December'
}, {
  sunshine: 20,
  month: 'July'
}, {
  sunshine: 11,
  month: 'October'
}];

$(function() {
  $("#pieChartContainer").dxPieChart({
    title: {
      text: 'Test Chart 02',
      margin: 10
    },
    animation: {
      duration: 2000,
      easing: 'easeOutCubic'
    },
    palette: 'Soft',
    dataSource: pieChartData,
    series: [{
      title: {
        text: 'month'
      },
      valueField: 'sunshine',
      argumentField: 'month',
      point: 'month',
      label: {
        visible:...