<h1>Rapportage uitporteringen</h1>
{literal}
<link href="css/jquery.jqplot.css" type="text/css" rel="stylesheet" media="screen"/>
<script type="text/javascript" src="js/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript">
function get_port_graph(title,month, year, type, elem, chart_type)
{
    // clear the whole thing first!
    var tmpholder = $('#'+elem).find('.options');
    $('#'+elem).html('');
    $('#'+elem).html(tmpholder);


    $.load_x("nummerloket_outports_ajax.php?get_ports&type=report_per_operator&subtype="+type+"&month="+month+"&chart_type="+chart_type+'&year='+year, '', 'json', false, function(data_get) {

    if(data_get == null || data_get.rows == 0)
    {

        setTimeout(function(){ show_dialog('Geen statistieken gevonden');}, 500);
    }
    else
    {


      var data = [];

      if(chart_type == 'pie')
      {
          $.each(data_get.rows, function(key, value)
          {
              var elem = [];
              elem.push(key,parseInt(value));
              data.push(elem);

          });

         $.jqplot (elem, [data],
         {
          seriesDefaults: {
            renderer: jQuery.jqplot.PieRenderer,
            rendererOptions: {
              fill: true,
              showDataLabels: true,
              sliceMargin: 3,

              lineWidth: 2
            }
          },
          title: title,
          legend: { show:true, location: 'e' },
         highlighter: {
           show: true,
           sizeAdjust: 7.5
          },
          cursor: {
           show: false
          }
        }
      );
      }
      else if(chart_type == 'bar')
      {
         var ticks = [];
         for(var cn=0; cn < months.length; cn++)
         {
            ticks[cn] = months[cn];
         }

         var s1 = [0,0,0,0,0,0,0,0,0,0,0,0];
         $.each(data_get.rows, function(key, value)
         {
            s1[--key] = value;
         });

        $.jqplot(elem, [s1], {
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                rendererOptions: {fillToZero: true},
                pointLabels: {show: true}
            },
            series:[
                {label:'Uitporteringen'}
            ],
            legend: {
                show: true,
                placement: 'outsideGrid'
            },
            title: title,
            axes: {

                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: ticks
                },
                yaxis: {
                    pad: 0,
                    tickOptions: {formatString: '%d'}
                }
            }
        });
      }


    }
    var $options_div = $('#'+elem).find('.options');

    $.each($options_div, function(option)
    {

    });

    $('.jqplot-title').css({'height': '165px'});
    var left = $('#'+elem).find('.jqplot-event-canvas').attr('width').left + 300;




    $('#'+elem).append('<div style="left: '+left+ 'px;" class="chart_options">\
    <fieldset class="ui-widget ui-widget-content ui-fieldset"><legend class="ui-widget-header ui-corner-all">Opties</legend>\
    <div id="'+elem+'_options">\
    </fieldset>\
    </div>');


    if($options_div)
    {
        $('#'+elem+'_options').append($options_div.html());
        $options_div.hide();
    }

    $('#'+elem+'_options').append("<button class=\'savebtn\' onclick=\'export_to_png("+elem+");\' id=\'export_'+$('#'+elem).attr('id')+'\'>Download</button>").find('.savebtn').button({ icons:
                {
                    primary: "ui-icon-disk"
                }
          });

      $('.option_item').each(function()
        {
            var $cur_val = $(this).val();
            //alert($cur_val.length);
            if($cur_val.length > 0)
            {
                var option = $(this).attr('id').split('option_');
                $('#'+option[1]).val(String($cur_val));
                setTimeout(function(){$('#'+option[1]).val(String($cur_val))}, 1000);

            }
         });


    });
}

function year_chart(year)
{
    var d = new Date();
    get_port_graph("Uitporteringen "+year,d.getMonth(), year,'outport', 'chart1', 'bar');

}


$(function(){
    var d = new Date();
    get_port_graph("Uitporteringen per operator - "+months[d.getMonth()],d.getMonth(),d.getFullYear(),'outport', 'chart2', 'pie');
    year_chart(d.getFullYear());


});


</script>

{/literal}
<div id="chart1" style="height:300px; width:650px;margin-top: 75px; border: 1px solid #ccc"><div class="options">
    <input type="hidden" value="" id="option_years" class="option_item"/>
    <select id="years" onchange="year_chart(this.value); $('#option_years').val(this.value);">
        <option value="2011">2011</option>
        <option value="2012">2012</option>
        <option value="2013">2013</option>
        <option value="2014">2014</option>
        <option value="2015">2015</option>
    </select>
</div>
</div>
<div id="chart2" style="height:300px; width:650px;margin-top: 75px; border: 1px solid #ccc"></div>