<?php $jsRoot = $config->webRoot . "js/";?>
<script src="<?php echo $jsRoot . 'chartjs/chart.2.9.4.min.js'?>"></script>

<table class='table active-disabled'>
  <tr class='text-top'>
    <td>
      <div class='chart-wrapper text-center'>
        <h5><?php echo $chartTitle;?></h5>
        <div class='chart-canvas'>
          <?php $height = $longBlock ? '200' : '400';?>
          <?php if($type == 'monthTrade'):?>
          <style>
          .legend ul li{list-style:none;display:inline-block;margin-right:2%;}
          .legend ul li span{ width:50px; height:15px;display:inline-block;margin-right:5px;vertical-align: middle;text-align: center;}
          .legend ul li .lineLegend {height:3px;}
          .legend ul li .in{background-color:<?php echo $config->block->chartOptions['color']['in'];?>}
          .legend ul li .out{background-color:<?php echo $config->block->chartOptions['color']['out'];?>}
          </style>
          <div id='legend' class='legend'>
            <ul class="0-legend">
              <li><span class='lineLegend in'></span><?php echo $lang->trade->in;?></li>
              <li><span class='lineLegend out'></span><?php echo $lang->trade->out;?></li>
              <li><span class='in'></span><?php echo $lang->trade->in;?></li>
              <li><span class='out'></span><?php echo $lang->trade->out;?></li>
            </ul>
          </div>
          <?php endif;?>
          <canvas name="<?php echo 'chart-' . $type;?>" width='800' height='<?php echo $height;?>' data-responsive='true'></canvas>
        </div>
      </div>
    </td>
  </tr>
</table>

<?php js::set('data', $data);?>
<?php js::set('type', $type);?>
<script>
var options =
{
    /* Set canvas top margin. */
    layout: {padding:{top: 20}},
    hover:  {animationDuration: 0},

    animation:
    {
        duration: 1,
        /* Set value on bar. */
        onComplete: function()
        {
            var that          = this;
            var chartInstance = that.chart;
            var ctx           = chartInstance.ctx;
            ctx.font          = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
            ctx.textAlign     = 'center';
            ctx.textBaseline  = 'bottom';
            that.data.datasets.forEach(function(dataset, i)
            {
                if(dataset.showData != undefined && !dataset.showData) return;

                chartInstance.controller.getDatasetMeta(i).data.forEach(function (bar, index)
                {
                    if(that._hoverIndex && that._hoverIndex.indexOf('|' + [i, index].join(',') + '|') >= 0) return;

                    var data = dataset.data[index];
                    /* Set different value color. */
                    ctx.fillStyle = data >= 0 ? '#333' : 'red';
                    /* Set different value position. */
                    var modelY = data >= 0 ? bar._model.y - 5 : bar._model.y + 15;
                    ctx.fillText(data, bar._model.x, modelY);
                });
            });
        }
    },

    legend:  {display: false},
    scales:  {xAxes: [{ticks: {padding: 15}}], yAxes: [{ticks: {beginAtZero: true}}]},
    onHover: function(event, elements)
    {
        var hoverIndexes = [];
        if(elements.length)
        {
            for(var i = 0; i < elements.length; i++)
            {
                var element = elements[i];
                hoverIndexes.push([element._datasetIndex, element._index].join(','));
            }
        }
        this._hoverIndex = hoverIndexes.length ? '|' + hoverIndexes.join('|') + '|' : '';
    }
};

$(function()
{
    /* Adjust yearprofit block height. */
    if(v.type == 'yearProfit')
    {
        var height = '590';
        if($(document).width() < 1500) height = '370';
        $('[name=chart-yearProfit]').attr('width', '800').attr('height', height);
    }

    /* Generate charts. */
    for(var i = 0; i < $('[name=chart-' + v.type + ']').length; i++)
    {
        var ctx     = $('[name=chart-' + v.type + ']')[i].getContext('2d');
        var myChart = new Chart(ctx,
        {
            type: 'bar',
            data: v.data,
            options: options
        });
    }
});
</script>