[#if ID=""#]
 [#begin CHARTS#]
 <p>
  <big><b><a href="?id=[#ID#]&from_list=1">[#TITLE#]</a></b></big>
  [#if SUBTITLE!=""#]
  <br>[#SUBTITLE#]
  [#endif#]
 </p>
 [#end CHARTS#]
[#endif#]

[#if ID!=""#]
<div id="chart_<#ID#>">
[#if FROM_LIST="1"#]
<p><a href="?">&lt;&lt;&lt; <#LANG_BACK#></a></p>
[#endif#]
[#if ENABLE_FULLSCREEN="1"#]
<div style="padding:10px;position:absolute;z-index:1000">
    <a href="#" id="btnFullScreen<#ID#>" class="btn btn-default btn-success"><i class="glyphicon glyphicon-fullscreen"></i></a>
</div>
[#endif#]
<div id="container_<#ID#>" style="width:[#WIDTH#]; height:[#HEIGHT#];"></div>
<script src="<#ROOTHTML#>3rdparty/highcharts/highcharts.js"></script>
<script src="<#ROOTHTML#>3rdparty/highcharts/highcharts-more.js"></script>
<script src="<#ROOTHTML#>3rdparty/highcharts/modules/solid-gauge.js"></script>
[#if THEME=""#]
[#if "<#SETTINGS_THEME#>"=="dark"#]
<script src="<#ROOTHTML#>3rdparty/highcharts/themes/dark-unica.js"></script>
[#endif SETTINGS_THEME#]
[#else THEME#]
<script src="<#ROOTHTML#>3rdparty/highcharts/themes/[#THEME#].js"></script>
[#endif THEME#]
    <style>
        .highcharts-background {
            fill: rgba(0, 0, 0, 0);
        }
    </style>
<script language="javascript">

var chartUpdateTimer<#ID#>;

function requestData[#ID#]() {
 //alert('load data!');
 [#begin PROPERTIES#]
    var url='<#ROOTHTML#>ajax/charts.html?id=<#ID#>&prop_id=[#ID#]&type=[#TYPE#]&period=<#PERIOD#>&group=<#GROUP#>&group_type=<#GROUP_TYPE#>';
    $.ajax({
        url: url,
        success: function(data) {
         var obj=jQuery.parseJSON(data);
         if (obj.RESULT=='OK') {
          var history_count=obj.HISTORY.length;
          if (history_count>0) {
           chart<#ID#>.series[[#NUM#]].setData(obj.HISTORY);
          }
         }
        },
        cache: false
    });
 [#end PROPERTIES#]
 chartUpdateTimer<#ID#>=setTimeout('requestData[#ID#]();', <#INTERVAL#>*1000);
 return false;
}

function requestMultiData[#ID#]() {
    //alert('load data!');
    var url='<#ROOTHTML#>ajax/charts.html?id=<#ID#>&multi_data=1&group=<#GROUP#>&group_type=<#GROUP_TYPE#>';
    $.ajax({
        url: url,
        success: function(data) {
            var obj=jQuery.parseJSON(data);
            if (obj.RESULT=='OK') {
                var history_count=obj.HISTORY.length;
                if (history_count>0) {
                    chart<#ID#>.series[0].setData(obj.HISTORY);
                }
            }
        },
        cache: false
    });
    chartUpdateTimer<#ID#>=setTimeout('requestMultiData[#ID#]();', <#INTERVAL#>*1000);
return false;
}
 


$(function () { 
    var config = {};

    [#if HISTORY_DEPTH!="0"#]

    <!--# HISTORY #-->

    config = {
        chart: {
            renderTo: 'container_<#ID#>',
            type: '<#FIRST_TYPE#>',
            zoomType: 'x',
            events: {
                load: requestData[#ID#]
            }
        },
        title: {
            text: '<#TITLE#>'
        },
        [#if SUBTITLE!=""#]
        subtitle: {
            text: '<#SUBTITLE#>'
        },
        [#endif#]
                        
        xAxis: {
            [#if GROUP==""#]type: 'datetime',
                    [#else GROUP#]
            categories: [<#GROUP_CATEGORIES#>],
                    [#endif GROUP#]
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%e. %b',
                year: '%b'
            }
        },

         [#if MULTIPLE_AXIS="1"#]
                yAxis: [
                [#begin PROPERTIES#]
                { 
            labels: {
                format: '{value} [#UNIT#]',
                style: {
                    color: Highcharts.getOptions().colors[[#NUM#]]
                }
            },
            title: {
                text: '[#TITLE#]',
                style: {
                    color: Highcharts.getOptions().colors[[#NUM#]]
                }
            }
            [#if SETTINGS!=""#],[#SETTINGS#][#endif#]
            [#if OPPOSITE="1"#], opposite: true[#endif#]
        }[#if LAST!="1"#], [#endif#]
                [#end PROPERTIES#]
                ],              
        [#else MULTIPLE_AXIS#]
                yAxis: [
                [#begin PROPERTIES#]
                { 
            labels: {
                format: '{value} [#UNIT#]',
                style: {
                    color: Highcharts.getOptions().colors[[#NUM#]]
                }
            },
            title: {
                text: '',
                style: {
                    color: Highcharts.getOptions().colors[[#NUM#]]
                }
            }
            [#if SETTINGS!=""#],[#SETTINGS#][#endif#]
            [#if OPPOSITE="1"#], opposite: true[#endif#]
        }[#if LAST!="1"#], [#endif#]
                [#end PROPERTIES#]
                ],              
        [#else MULTIPLE_AXIS#]
        [#endif MULTIPLE_AXIS#] 
                

        plotOptions: {
            spline: {
                marker: {
                    enabled: true
                }
            },

            area: {
                [#if "<#STACK#>"!=""#]stacking: 'normal',[#endif#]
            },
            series: {
                fillOpacity: 0.25
            },
        },
        tooltip: {
            shared: true
        },

                
        series: [
        [#begin PROPERTIES#]
        {
            name: '[#TITLE#]',
            type: '[#TYPE#]',
                        tooltip: {
                valueSuffix: ' [#UNIT#]'
            },
                        [#if NO_MARKERS="1"#]
                        marker: {
                                enabled: false
                        },                      
                        [#endif#]
              [#if "<#MULTIPLE_AXIS#>"=="1"#]
              yAxis: [#NUM#],
              [#endif#]
            data: []
        }[#if LAST!="1"#], [#endif#]
        [#end PROPERTIES#]
        ]
                
    }
        
        [#else HISTORY_DEPTH#]

    <!--# REALTIME #-->

    [#if FIRST_TYPE="gauge"#]
    config = {        

        chart: {
            type: '<#FIRST_TYPE#>',
            renderTo: 'container_<#ID#>',                       
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false,
            events: {
                load: requestData[#ID#]
            }                   
        },
        title: {
            text: '[#TITLE#]'
        },
        [#if SUBTITLE!=""#]
        subtitle: {
            text: '<#SUBTITLE#>'
        },
        [#endif#]               
        pane: {
            startAngle: -150,
            endAngle: 150,
            background: [{
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#FFF'],
                        [1, '#333']
                    ]
                },
                borderWidth: 0,
                outerRadius: '109%'
            }, {
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#333'],
                        [1, '#FFF']
                    ]
                },
                borderWidth: 1,
                outerRadius: '107%'
            }, {
                // default background
            }, {
                backgroundColor: '#DDD',
                borderWidth: 0,
                outerRadius: '105%',
                innerRadius: '103%'
            }]
        },

                yAxis: [
                [#begin PROPERTIES#]
                { 
                        [#if SETTINGS!=""#][#SETTINGS#],[#endif#]
            labels: {
                format: '{value} [#UNIT#]',
                style: {
                    color: Highcharts.getOptions().colors[[#NUM#]]
                },
                rotation: 'auto'                                
            },
            title: {
                text: '[#TITLE#]',
                style: {
                    color: Highcharts.getOptions().colors[[#NUM#]]
                }
            }

            [#if OPPOSITE="1"#], opposite: true[#endif#]
        }[#if LAST!="1"#], [#endif#]
                [#end PROPERTIES#]
                ],              
        series: [
        [#begin PROPERTIES#]
        {
            name: '[#TITLE#]',
            type: '[#TYPE#]',
                        tooltip: {
                valueSuffix: ' [#UNIT#]'
            },
              yAxis: [#NUM#],
            data: []
        }[#if LAST!="1"#], [#endif#]
        [#end PROPERTIES#]
        ]

    }

        [#endif FIRST_TYPE#]
                
        [#if FIRST_TYPE="solidgauge"#]
    config = {

        chart: {
            type: '<#FIRST_TYPE#>',
            renderTo: 'container_<#ID#>',                       
            events: {
                load: requestData[#ID#]
            }                   
        },
        title: {
            text: '[#TITLE#]'
        },
        [#if SUBTITLE!=""#]
        subtitle: {
            text: '<#SUBTITLE#>'
        },
        [#endif#]               

        credits: {
            enabled: false
        },      

        plotOptions: {
            solidgauge: {
                dataLabels: {
                    y: 5,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        },
                
        pane: {
            center: ['50%', '85%'],
            size: '100%',
            startAngle: -90,
            endAngle: 90,
            background: {
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                innerRadius: '60%',
                outerRadius: '100%',
                shape: 'arc'
            }
        },

        tooltip: {
            enabled: false
        },              
                
                yAxis: [
                [#begin PROPERTIES#]
                { 
            minorTickInterval: null,
            tickPixelInterval: 400,
            tickWidth: 0,
            [#if SETTINGS!=""#][#SETTINGS#],[#endif#]
            labels: {
                format: '{value} [#UNIT#]',
                                y: 16,
                style: {
                    color: Highcharts.getOptions().colors[[#NUM#]]
                }                                
            },
            title: {
                                y: -90,
                text: '[#TITLE#]',
                style: {
                    color: Highcharts.getOptions().colors[[#NUM#]]
                }
            },
credits: {
            enabled: false
        }

            [#if OPPOSITE="1"#], opposite: true[#endif#]
        }[#if LAST!="1"#], [#endif#]
                [#end PROPERTIES#]
                ],              
        series: [
        [#begin PROPERTIES#]
        {
            name: '[#TITLE#]',
            type: '[#TYPE#]',
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                       '<span style="font-size:12px;color:silver">[#UNIT#]</span></div>',

            },
            tooltip: {
                valueSuffix: ' [#UNIT#]'
            },
                        
              yAxis: [#NUM#],
            data: []
        }[#if LAST!="1"#], [#endif#]
        [#end PROPERTIES#]
        ]

    }
        
         [#endif FIRST_TYPE#]

    [#if FIRST_TYPE="pie"#]
    config = {

        chart: {
            type: '<#FIRST_TYPE#>',
            renderTo: 'container_<#ID#>',
            events: {
                load: requestMultiData[#ID#]
}
},
    title: {
        text: '[#TITLE#]'
    },
    [#if SUBTITLE!=""#]
    subtitle: {
        text: '<#SUBTITLE#>'
    },
    [#endif#]

    credits: {
        enabled: false
    },

    tooltip: {
        pointFormat: '<b>{point.percentage:.1f}%</b>'
    },

    plotOptions: {
        pie: {
            allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                enabled: false
            },
            showInLegend: true,

        }
    },


    series: [
    {
        name: '[#TITLE#]',
        tooltip: {
            valueSuffix: ' [#UNIT#]'
        },
        data: []
    }
    ]

}

    [#endif FIRST_TYPE#]
        
        [#endif HISTORY_DEPTH#]

    var options = {};
    [#if HIGHCHARTS_SETUP!=""#]
    var configFunc = ([#HIGHCHARTS_SETUP#]);
    config = configFunc(config, options) || config;
    [#endif#]

    Highcharts.setOptions(options);
    chart<#ID#> = new Highcharts.Chart(config);

    [#if ENABLE_FULLSCREEN="1"#]
    chart<#ID#>_fullScreenContainer=chart<#ID#>.container.parentNode;

        let btn[#ID#] = document.getElementById("btnFullScreen[#ID#]");
        btn[#ID#].addEventListener('click', function() {

        if((chart<#ID#>_fullScreenContainer.innerWidth == screen.width)) {

           if (chart<#ID#>_fullScreenContainer.exitFullscreen) {
              chart<#ID#>_fullScreenContainer.exitFullscreen();
            } else if (chart<#ID#>_fullScreenContainer.mozCancelFullScreen) { /* Firefox */
               chart<#ID#>_fullScreenContainer.mozCancelFullScreen();
              } else if (chart<#ID#>_fullScreenContainer.webkitExitFullscreen) { /* Chrome, Safari and Opera */
                   chart<#ID#>_fullScreenContainer.webkitExitFullscreen();
              } else if (chart<#ID#>_fullScreenContainer.msExitFullscreen) { /* IE/Edge */
                chart<#ID#>_fullScreenContainer.msExitFullscreen();
         }
         return;
        }

  Highcharts.FullScreen = function(container) {
    this.init(container); // main div of the chart
  };

  Highcharts.FullScreen.prototype = {
    init: function(container) {
      if (container.requestFullscreen) {
        container.requestFullscreen();
      } else if (container.mozRequestFullScreen) {
        container.mozRequestFullScreen();
      } else if (container.webkitRequestFullscreen) {
        container.webkitRequestFullscreen();
      } else if (container.msRequestFullscreen) {
        container.msRequestFullscreen();
      }
    }
  };
  chart<#ID#>.fullscreen = new Highcharts.FullScreen(chart<#ID#>_fullScreenContainer);
});
[#endif ENABLE_FULLSCREEN#]

   /*** add by skysilver ***/
   [#if VIEW_MODE="edit_charts"#]

      saveConfig(config);

      function saveConfig(json_config) {
         var url='<#ROOTHTML#>ajax/charts.html?op=saveJSON';
         var request = {id: <#ID#>, config: json_config};
         $.ajax({
            url: url,
            data: JSON.stringify(request),
            contentType : 'application/json',
            type : 'POST',
            success: function(data) {
               //
            },
            cache: false
         });
      }

   [#endif#]
   /************************/

});

</script>
</div>
[#endif ID#]