web/public_php/ams/js/init-chart.js

   1 //chart with points
   2 if ($("#sincos").length) {
   3     var sin = [], cos = [];
   4
   5     for (var i = 0; i < 14; i += 0.5) {
   6         sin.push([i, Math.sin(i) / i]);
   7         cos.push([i, Math.cos(i)]);
   8     }
   9
  10     var plot = $.plot($("#sincos"),
  11         [
  12             { data: sin, label: "sin(x)/x"},
  13             { data: cos, label: "cos(x)" }
  14         ], {
  15             series: {
  16                 lines: { show: true  },
  17                 points: { show: true }
  18             },
  19             grid: { hoverable: true, clickable: true, backgroundColor: { colors: ["#fff", "#eee"] } },
  20             yaxis: { min: -1.2, max: 1.2 },
  21             colors: ["#539F2E", "#3C67A5"]
  22         });
  23
  24     function showTooltip(x, y, contents) {
  25         $('<div id="tooltip">' + contents + '</div>').css({
  26             position: 'absolute',
  27             display: 'none',
  28             top: y + 5,
  29             left: x + 5,
  30             border: '1px solid #fdd',
  31             padding: '2px',
  32             'background-color': '#dfeffc',
  33             opacity: 0.80
  34         }).appendTo("body").fadeIn(200);
  35     }
  36
  37     var previousPoint = null;
  38     $("#sincos").bind("plothover", function (event, pos, item) {
  39         $("#x").text(pos.x.toFixed(2));
  40         $("#y").text(pos.y.toFixed(2));
  41
  42         if (item) {
  43             if (previousPoint != item.dataIndex) {
  44                 previousPoint = item.dataIndex;
  45
  46                 $("#tooltip").remove();
  47                 var x = item.datapoint[0].toFixed(2),
  48                     y = item.datapoint[1].toFixed(2);
  49
  50                 showTooltip(item.pageX, item.pageY,
  51                     item.series.label + " of " + x + " = " + y);
  52             }
  53         }
  54         else {
  55             $("#tooltip").remove();
  56             previousPoint = null;
  57         }
  58     });
  59
  60
  61     $("#sincos").bind("plotclick", function (event, pos, item) {
  62         if (item) {
  63             $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
  64             plot.highlight(item.series, item.datapoint);
  65         }
  66     });
  67 }
  68
  69 //flot chart
  70 if ($("#flotchart").length) {
  71     var d1 = [];
  72     for (var i = 0; i < Math.PI * 2; i += 0.25)
  73         d1.push([i, Math.sin(i)]);
  74
  75     var d2 = [];
  76     for (var i = 0; i < Math.PI * 2; i += 0.25)
  77         d2.push([i, Math.cos(i)]);
  78
  79     var d3 = [];
  80     for (var i = 0; i < Math.PI * 2; i += 0.1)
  81         d3.push([i, Math.tan(i)]);
  82
  83     $.plot($("#flotchart"), [
  84         { label: "sin(x)", data: d1},
  85         { label: "cos(x)", data: d2},
  86         { label: "tan(x)", data: d3}
  87     ], {
  88         series: {
  89             lines: { show: true },
  90             points: { show: true }
  91         },
  92         xaxis: {
  93             ticks: [0, [Math.PI / 2, "\u03c0/2"], [Math.PI, "\u03c0"], [Math.PI * 3 / 2, "3\u03c0/2"], [Math.PI * 2, "2\u03c0"]]
  94         },
  95         yaxis: {
  96             ticks: 10,
  97             min: -2,
  98             max: 2
  99         },
 100         grid: {
 101             backgroundColor: { colors: ["#fff", "#eee"] }
 102         }
 103     });
 104 }
 105
 106 //stack chart
 107 if ($("#stackchart").length) {
 108     var d1 = [];
 109     for (var i = 0; i <= 10; i += 1)
 110         d1.push([i, parseInt(Math.random() * 30)]);
 111
 112     var d2 = [];
 113     for (var i = 0; i <= 10; i += 1)
 114         d2.push([i, parseInt(Math.random() * 30)]);
 115
 116     var d3 = [];
 117     for (var i = 0; i <= 10; i += 1)
 118         d3.push([i, parseInt(Math.random() * 30)]);
 119
 120     var stack = 0, bars = true, lines = false, steps = false;
 121
 122     function plotWithOptions() {
 123         $.plot($("#stackchart"), [ d1, d2, d3 ], {
 124             series: {
 125                 stack: stack,
 126                 lines: { show: lines, fill: true, steps: steps },
 127                 bars: { show: bars, barWidth: 0.6 }
 128             }
 129         });
 130     }
 131
 132     plotWithOptions();
 133
 134     $(".stackControls input").click(function (e) {
 135         e.preventDefault();
 136         stack = $(this).val() == "With stacking" ? true : null;
 137         plotWithOptions();
 138     });
 139     $(".graphControls input").click(function (e) {
 140         e.preventDefault();
 141         bars = $(this).val().indexOf("Bars") != -1;
 142         lines = $(this).val().indexOf("Lines") != -1;
 143         steps = $(this).val().indexOf("steps") != -1;
 144         plotWithOptions();
 145     });
 146 }
 147
 148 //pie chart
 149 var data = [
 150     { label: "Internet Explorer", data: 12},
 151     { label: "Mobile", data: 27},
 152     { label: "Safari", data: 85},
 153     { label: "Opera", data: 64},
 154     { label: "Firefox", data: 90},
 155     { label: "Chrome", data: 112}
 156 ];
 157
 158 if ($("#piechart").length) {
 159     $.plot($("#piechart"), data,
 160         {
 161             series: {
 162                 pie: {
 163                     show: true
 164                 }
 165             },
 166             grid: {
 167                 hoverable: true,
 168                 clickable: true
 169             },
 170             legend: {
 171                 show: false
 172             }
 173         });
 174
 175     function pieHover(event, pos, obj) {
 176         if (!obj)
 177             return;
 178         percent = parseFloat(obj.series.percent).toFixed(2);
 179         $("#hover").html('<span style="font-weight: bold; color: ' + obj.series.color + '">' + obj.series.label + ' (' + percent + '%)</span>');
 180     }
 181
 182     $("#piechart").bind("plothover", pieHover);
 183 }
 184
 185 //donut chart
 186 if ($("#donutchart").length) {
 187     $.plot($("#donutchart"), data,
 188         {
 189             series: {
 190                 pie: {
 191                     innerRadius: 0.5,
 192                     show: true
 193                 }
 194             },
 195             legend: {
 196                 show: false
 197             }
 198         });
 199 }
 200
 201
 202 // we use an inline data source in the example, usually data would
 203 // be fetched from a server
 204 var data = [], totalPoints = 300;
 205
 206 function getRandomData() {
 207     if (data.length > 0)
 208         data = data.slice(1);
 209
 210     // do a random walk
 211     while (data.length < totalPoints) {
 212         var prev = data.length > 0 ? data[data.length - 1] : 50;
 213         var y = prev + Math.random() * 10 - 5;
 214         if (y < 0)
 215             y = 0;
 216         if (y > 100)
 217             y = 100;
 218         data.push(y);
 219     }
 220
 221     // zip the generated y values with the x values
 222     var res = [];
 223     for (var i = 0; i < data.length; ++i)
 224         res.push([i, data[i]])
 225     return res;
 226 }
 227
 228 // setup control widget
 229 var updateInterval = 30;
 230 $("#updateInterval").val(updateInterval).change(function () {
 231     var v = $(this).val();
 232     if (v && !isNaN(+v)) {
 233         updateInterval = +v;
 234         if (updateInterval < 1)
 235             updateInterval = 1;
 236         if (updateInterval > 2000)
 237             updateInterval = 2000;
 238         $(this).val("" + updateInterval);
 239     }
 240 });
 241
 242 //realtime chart
 243 if ($("#realtimechart").length) {
 244     var options = {
 245         series: { shadowSize: 1 }, // drawing is faster without shadows
 246         yaxis: { min: 0, max: 100 },
 247         xaxis: { show: false }
 248     };
 249     var plot = $.plot($("#realtimechart"), [ getRandomData() ], options);
 250
 251     function update() {
 252         plot.setData([ getRandomData() ]);
 253         // since the axes don't change, we don't need to call plot.setupGrid()
 254         plot.draw();
 255
 256         setTimeout(update, updateInterval);
 257     }
 258
 259     update();
 260 }