001.<!DOCTYPE html>
002.<html lang="en">
003.<head>
004. <meta charset="UTF-8">
005. <title>Document</title>
006.</head>
007.<body>
008. <div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
009. <?php
010. $title = "My title.";
011. $speed = 30;
012. ?>
016. <script type="text/javascript">
017. $(document).ready(function() {
018. $('#container').highcharts({
019.
020. chart: {
021. type: 'gauge',
022. plotBackgroundColor: null,
023. plotBackgroundImage: null,
024. plotBorderWidth: 0,
025. plotShadow: false
026. },
027.
028. title: {
029. text: ''
030. },
031.
032. pane: {
033. startAngle: -150,
034. endAngle: 150,
035. background: [{
036. backgroundColor: {
037. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
038. stops: [
039. [0, '#FFF'],
040. [1, '#333']
041. ]
042. },
043. borderWidth: 0,
044. outerRadius: '109%'
045. }, {
046. backgroundColor: {
047. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
048. stops: [
049. [0, '#333'],
050. [1, '#FFF']
051. ]
052. },
053. borderWidth: 1,
054. outerRadius: '107%'
055. }, {
056.
057. }, {
058. backgroundColor: '#DDD',
059. borderWidth: 0,
060. outerRadius: '105%',
061. innerRadius: '103%'
062. }]
063. },
064.
065.
066. yAxis: {
067. min: 0,
068. max: 100,
069.
070. minorTickInterval: 'auto',
071. minorTickWidth: 1,
072. minorTickLength: 10,
073. minorTickPosition: 'inside',
074. minorTickColor: '#666',
075.
076. tickPixelInterval: 30,
077. tickWidth: 2,
078. tickPosition: 'inside',
079. tickLength: 10,
080. tickColor: '#666',
081. labels: {
082. step: 2,
083. rotation: 'auto'
084. },
085. title: {
086. text: 'กม/ชม'
087. },
088. plotBands: [{
089. from: 0,
090. to: 50,
091. color: '#55BF3B'
092. }, {
093. from: 50,
094. to: 100,
095. color: '#DF5353'
096. }]
097. },
098.
099. series: [{
100. name: 'Speed',
101. data: [<?php echo $speed ?>],
102. tooltip: {
103. valueSuffix: 'กม/ชม'
104. }
105. }]
106.
107. },
108.
109. function (chart) {
110. if (!chart.renderer.forExport) {
111. setInterval(function () {
112. var point = chart.series[0].points[0],
113. newVal,
114. inc = Math.round((Math.random() - 0.5) * 20);
115.
116. newVal = point.y + inc;
117. if (newVal < 0 || newVal > 100) {
118. newVal = point.y - inc;
119. }
120.
121. point.update(newVal);
122.
123. }, 3000);
124. }
125. });
126. });
127. </script>
128.</body>
129.</html>
Load balance : Server 00
