Sorting Data Points in CanvasJS HTML5 Charts - CanvasJS Javascript Charts

Sorting Data Points in CanvasJS HTML5 Charts - CanvasJS Javascript Charts

by levan gongadze

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div class="investment-tools">
<div>
<h1>Investment Amount</h1>
<label for="invest" class="invest checked">100</label>
<input type="radio" name="invest" id="invest" value="100" checked>

<label for="invest1" class="invest">1000</label>
<input type="radio" name="invest" id="invest1" value="1000">

<label for="invest2" class="invest">10000</label>
<input type="radio" name="invest" id="invest2" value="10000">

<label for="invest3" class="invest">100000</label>
<input type="radio" name="invest" id="invest3" value="100000">
</div>

<br/>

<div>
<h1>Investment Period</h1>
<label for="time" class="time checked">1 Month</label>
<input type="radio" name="time" id="time" value="5" checked>

<label for="time1" class="time">3 Month</label>
<input type="radio" name="time" id="time1" value="15">

<label for="time2" class="time">6 Month</label>
<input type="radio" name="time" id="time2" value="25">

<label for="time3" class="time">1 Year</label>
<input type="radio" name="time" id="time3" value="35">
</div>
</div>

<div id="returnchart" style="height: 210px; width: 300px;"></div>

CSS

.investment-tools {
  background: #3e6edf;
  padding: 20px;
  padding-bottom: 35px;
  border-radius: 5px;
  width: 300px;
  float: left;
}

.investment-tools h1 {
  font-size: 16px;
  color: #fff;
}

.investment-tools input[type="radio"] {
  display: none;
}

.investment-tools label {
  background: #fff;
  padding: 4px;
  border-radius: 3px;
  font-size: 13px;
  margin-right: 5px;
  cursor: pointer;
}

.checked {
  background: red !important;
}

JavaScript

render(100, 150);


$('input').change(function() {
    invest = $('input[name="invest"]:checked');
    time = $('input[name="time"]:checked');
    
		$('label.'+$(this).attr('name')+'').removeClass('checked');
    $('label[for="'+$(this).attr('id')+'"]').addClass('checked');
    
    render(Number(invest.val()), Number(time.val() * invest.val()));
});


function render(data1, data2) {
    var chart = new CanvasJS.Chart("returnchart",
    {
    theme: "dark1",
      title:{
      text: ""
      },
      		dataPointWidth: 90,

        data: [
      {
        type: "stackedColumn",
        dataPoints: [
        {  y: data1 , label: "Invest"},
        {  y: data1, label: "Invest" },

        ]
      },  {
        type: "stackedColumn",
         dataPoints: [
        {  y: 0 , label: "Invest"},
        {  y: data2, label: "Return" },

        ]
      }
      ]
    });

    chart.render();
}