{* Smarty *}

{literal}
<script type="text/javascript">
//<![CDATA[
var chart;
var tbl;
$(function() {
  tbl = $('#ReportSvtGarantOffDiv').html();
  $("#ReportSvtGarantOffButtonRadio").buttonset();
  $("#ReportSvtGarantOffButtonChart").click(function() {
    $("#ReportSvtGarantOffDiv").hide();
    ChartsInit(tbl);
  });
  $("#ReportSvtGarantOffButtonTable").click(function() {
    ChartsDestroy();
    $("#ReportSvtGarantOffDiv").show();
    $("#ReportSvtGarantOff").show();
    tableToGrid("#ReportSvtGarantOff", {height:345, caption:'Гарантия по типам СВТ'});
  });
  $("#ReportSvtGarantOffButtonChart").click();
});

Highcharts.visualize = function(table, options) {
  options.xAxis.categories = [];
  //$('tbody th', table).each( function(i) {
  $('tbody tr td:first-child', table).each( function(i) {
    options.xAxis.categories.push(this.innerHTML);
  });

  options.series = [];
  $('tr', table).each( function(i) {
    var tr = this;
    $('th, td', tr).each( function(j) {
      if (j > 0) {
        if (i == 0) {
          options.series[j - 1] = { 
            name: this.innerHTML,
            data: []
          };
        } else {
          options.series[j - 1].data.push(parseFloat(this.innerHTML));
        }
      }
    });
  });

  chart = new Highcharts.Chart(options);
}

//$(function(){
function ChartsInit(tbl){
  $('#ReportSvtGarantOffDiv').html(tbl);
  var table = $('#ReportSvtGarantOff'),
  options = {
    chart: {
       renderTo: 'ReportSvtGarantOffChartsContainer',
       defaultSeriesType: 'column'
    },
    colors: ['#89A54E', '#AA4643'],
    title: {
       text: 'Гарантия по типам СВТ'
    },
    xAxis: {
       labels: {
       rotation: -45,
       align: 'right',
       style: {
           fontSize: '12px',
           fontFamily: 'Verdana, sans-serif'
       }
      }
    },
    yAxis: {
      min: 0,
       title: {
          text: 'Количество'
       }
    },
    tooltip: {
       formatter: function() {
           return ''+
               this.series.name +': '+ this.y +' ('+ Math.round(this.percentage) +'%)';
       }
    },
    plotOptions: {
       column: {
           stacking: 'percent'
       }
    }
  };
  Highcharts.visualize(table, options);
}//);
  
function ChartsDestroy(){
  chart && chart.destroy();
  chart = null;
}  
//]]>
</script>
{/literal}

<div id="ReportSvtGarantOffButtonRadio">
  <input type="radio" id="ReportSvtGarantOffButtonChart" name="ReportSvtGarantOffButtonRadio"><label for="ReportSvtGarantOffButtonChart">График</label>
  <input type="radio" id="ReportSvtGarantOffButtonTable" name="ReportSvtGarantOffButtonRadio" checked="checked"><label for="ReportSvtGarantOffButtonTable">Таблица</label>
</div>
<div id="ReportSvtGarantOffDiv" style="width: 800px; margin: 0 auto;">
  <table id="ReportSvtGarantOff" style="display: none;">
    <thead>
      <tr>
        <th></th>
        <th>СВТ на гарантии</th>
        <th>СВТ без гарантии</th>
      </tr>
    </thead>
    <tbody>
    {foreach $ArrSvtTypeAll as $key => $val}
      {if $ArrSvtType.$key.svt_count}
        {$VarCountWriteoff = $ArrSvtType.$key.svt_count}
      {else}
        {$VarCountWriteoff = 0}
      {/if}
      <tr>
        <td>{$val.svttype_name}</td>
        <td>{$val.svt_count - $VarCountWriteoff}</td>
        <td>{$VarCountWriteoff}</td>
      </tr>
    {/foreach}
    </tbody>
  </table>
</div>
<div id="ReportSvtGarantOffChartsContainer" style="width: 800px; margin: 0 auto;"></div>