github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/themes/wind/static/js/charts/flot/demo.js (about)

     1  $(function(){
     2  
     3    // 
     4    var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
     5    var d1 = [];
     6    for (var i = 0; i <= 11; i += 1) {
     7      d1.push([i, parseInt((Math.floor(Math.random() * (1 + 20 - 10))) + 10)]);
     8    }
     9  
    10    $("#flot-1ine").length && $.plot($("#flot-1ine"), [{
    11            data: d1
    12        }], 
    13        {
    14          series: {
    15              lines: {
    16                  show: true,
    17                  lineWidth: 1,
    18                  fill: true,
    19                  fillColor: {
    20                      colors: [{
    21                          opacity: 0.3
    22                      }, {
    23                          opacity: 0.3
    24                      }]
    25                  }
    26              },
    27              points: {
    28                  radius: 3,
    29                  show: true
    30              },
    31              grow: {
    32                active: true,
    33                steps: 20,
    34                growings:[
    35                    {
    36                        stepDirection: "down"
    37                    }                    
    38                ]
    39              },
    40              shadowSize: 2
    41          },
    42          grid: {
    43              hoverable: true,
    44              clickable: true,
    45              tickColor: "#f0f0f0",
    46              borderWidth: 1,
    47              color: '#f0f0f0'
    48          },
    49          colors: ["#1bb399"],
    50          xaxis:{
    51          },
    52          yaxis: {
    53            ticks: 5
    54          },
    55          tooltip: true,
    56          tooltipOpts: {
    57            content: "chart: %x.1 is %y.4",
    58            defaultTheme: false,
    59            shifts: {
    60              x: 0,
    61              y: 20
    62            }
    63          }
    64        }
    65    );
    66  
    67    var d0 = [
    68      [0,0],[1,0],[2,1],[3,2],[4,15],[5,5],[6,12],[7,10],[8,55],[9,13],[10,25],[11,10],[12,12],[13,6],[14,2],[15,0],[16,0]
    69    ];
    70    var d00 = [
    71      [0,0],[1,0],[2,1],[3,0],[4,1],[5,0],[6,2],[7,0],[8,3],[9,1],[10,0],[11,1],[12,0],[13,2],[14,1],[15,0],[16,0]
    72    ];
    73    $("#flot-sp1ine").length && $.plot($("#flot-sp1ine"), [
    74            d0, d00
    75        ],
    76        {
    77          series: {
    78              lines: {
    79                  show: false
    80              },
    81              splines: {
    82                show: true,
    83                tension: 0.4,
    84                lineWidth: 1,
    85                fill: 0.4
    86              },
    87              points: {
    88                  radius: 0,
    89                  show: true
    90              },
    91              shadowSize: 2
    92          },
    93          grid: {
    94              hoverable: true,
    95              clickable: true,
    96              tickColor: "#d9dee9",
    97              borderWidth: 1,
    98              color: '#d9dee9'
    99          },
   100          colors: ["#19b39b", "#644688"],
   101          xaxis:{
   102          },
   103          yaxis: {
   104            ticks: 4
   105          },
   106          tooltip: true,
   107          tooltipOpts: {
   108            content: "chart: %x.1 is %y.4",
   109            defaultTheme: false,
   110            shifts: {
   111              x: 0,
   112              y: 20
   113            }
   114          }
   115        }
   116    );
   117    
   118    var d2 = [];
   119    for (var i = 0; i <= 6; i += 1) {
   120      d2.push([i, parseInt((Math.floor(Math.random() * (1 + 30 - 10))) + 10)]);
   121    }
   122    var d3 = [];
   123    for (var i = 0; i <= 6; i += 1) {
   124      d3.push([i, parseInt((Math.floor(Math.random() * (1 + 30 - 10))) + 10)]);
   125    }
   126    $("#flot-chart").length && $.plot($("#flot-chart"), [{
   127            data: d2,
   128            label: "Unique Visits"
   129        }, {
   130            data: d3,
   131            label: "Page Views"
   132        }], 
   133        {
   134          series: {
   135              lines: {
   136                  show: true,
   137                  lineWidth: 1,
   138                  fill: true,
   139                  fillColor: {
   140                      colors: [{
   141                          opacity: 0.3
   142                      }, {
   143                          opacity: 0.3
   144                      }]
   145                  }
   146              },
   147              points: {
   148                  show: true
   149              },
   150              shadowSize: 2
   151          },
   152          grid: {
   153              hoverable: true,
   154              clickable: true,
   155              tickColor: "#f0f0f0",
   156              borderWidth: 0
   157          },
   158          colors: ["#1bb399","#177bbb"],
   159          xaxis: {
   160              ticks: 15,
   161              tickDecimals: 0
   162          },
   163          yaxis: {
   164              ticks: 10,
   165              tickDecimals: 0
   166          },
   167          tooltip: true,
   168          tooltipOpts: {
   169            content: "'%s' of %x.1 is %y.4",
   170            defaultTheme: false,
   171            shifts: {
   172              x: 0,
   173              y: 20
   174            }
   175          }
   176        }
   177    );
   178  
   179  
   180    // live update
   181    var data = [],
   182    totalPoints = 300;
   183  
   184    function getRandomData() {
   185  
   186      if (data.length > 0)
   187        data = data.slice(1);
   188  
   189      // Do a random walk
   190  
   191      while (data.length < totalPoints) {
   192  
   193        var prev = data.length > 0 ? data[data.length - 1] : 50,
   194          y = prev + Math.random() * 10 - 5;
   195  
   196        if (y < 0) {
   197          y = 0;
   198        } else if (y > 100) {
   199          y = 100;
   200        }
   201  
   202        data.push(y);
   203      }
   204  
   205      // Zip the generated y values with the x values
   206  
   207      var res = [];
   208      for (var i = 0; i < data.length; ++i) {
   209        res.push([i, data[i]])
   210      }
   211  
   212      return res;
   213    }
   214  
   215    var updateInterval = 30, live;
   216    $("#flot-live").length && ( live = $.plot("#flot-live", [ getRandomData() ], {
   217      series: {
   218        lines: {
   219            show: true,
   220            lineWidth: 1,
   221            fill: true,
   222            fillColor: {
   223                colors: [{
   224                    opacity: 0.2
   225                }, {
   226                    opacity: 0.1
   227                }]
   228            }
   229        },
   230        shadowSize: 2
   231      },
   232      colors: ["#cccccc"],
   233      yaxis: {
   234        min: 0,
   235        max: 100
   236      },
   237      xaxis: {
   238        show: false
   239      },
   240      grid: {
   241          tickColor: "#f0f0f0",
   242          borderWidth: 0
   243      },
   244    }) ) && update();
   245  
   246    function update() {
   247  
   248      live.setData([getRandomData()]);
   249  
   250      // Since the axes don't change, we don't need to call plot.setupGrid()
   251  
   252      live.draw();
   253      setTimeout(update, updateInterval);
   254    };
   255  
   256    // bar
   257    var d1_1 = [
   258      [10, 120],
   259      [20, 70],
   260      [30, 100],
   261      [40, 60]
   262    ];
   263  
   264    var d1_2 = [
   265      [10, 80],
   266      [20, 60],
   267      [30, 30],
   268      [40, 35]
   269    ];
   270  
   271    var d1_3 = [
   272      [10, 80],
   273      [20, 40],
   274      [30, 30],
   275      [40, 20]
   276    ];
   277  
   278    var data1 = [
   279      {
   280          label: "Product 1",
   281          data: d1_1,
   282          bars: {
   283              show: true,
   284              fill: true,
   285              lineWidth: 1,
   286              order: 1,
   287              fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.9}] }
   288          },
   289          color: "#6783b7"
   290      },
   291      {
   292          label: "Product 2",
   293          data: d1_2,
   294          bars: {
   295              show: true,
   296              fill: true,
   297              lineWidth: 1,
   298              order: 2,
   299              fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.9}] }
   300          },
   301          color: "#4fcdb7"
   302      },
   303      {
   304          label: "Product 3",
   305          data: d1_3,
   306          bars: {
   307              show: true,
   308              fill: true,
   309              lineWidth: 1,
   310              order: 3,
   311              fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.9}] }
   312          },
   313          color: "#8dd168"
   314      }
   315    ];
   316  
   317    var d2_1 = [
   318      [90, 10],
   319      [70, 20]
   320    ];
   321  
   322    var d2_2 = [
   323      [80, 10],
   324      [60, 20]
   325    ];
   326  
   327    var d2_3 = [
   328      [120, 10],
   329      [50, 20]
   330    ];
   331  
   332    var data2 = [
   333      {
   334          label: "Product 1",
   335          data: d2_1,
   336          bars: {
   337              horizontal: true,
   338              show: true,
   339              fill: true,
   340              lineWidth: 1,
   341              order: 1,
   342              fillColor: { colors: [{ opacity: 0.5 }, { opacity: 1}] }
   343          },
   344          color: "#6783b7"
   345      },
   346      {
   347          label: "Product 2",
   348          data: d2_2,
   349          bars: {
   350              horizontal: true,
   351              show: true,
   352              fill: true,
   353              lineWidth: 1,
   354              order: 2,
   355              fillColor: { colors: [{ opacity: 0.5 }, { opacity: 1}] }
   356          },
   357          color: "#4fcdb7"
   358      },
   359      {
   360          label: "Product 3",
   361          data: d2_3,
   362          bars: {
   363              horizontal: true,
   364              show: true,
   365              fill: true,
   366              lineWidth: 1,
   367              order: 3,
   368              fillColor: { colors: [{ opacity: 0.5 }, { opacity: 1}] }
   369          },
   370          color: "#8dd168"
   371      }
   372    ];
   373  
   374    $("#flot-bar").length && $.plot($("#flot-bar"), data1, {
   375        xaxis: {
   376            
   377        },
   378        yaxis: {
   379            
   380        },
   381        grid: {
   382            hoverable: true,
   383            clickable: false,
   384            borderWidth: 0
   385        },
   386        legend: {
   387            labelBoxBorderColor: "none",
   388            position: "left"
   389        },
   390        series: {
   391            shadowSize: 1
   392        },
   393        tooltip: true,
   394    });
   395  
   396    $("#flot-bar-h").length && $.plot($("#flot-bar-h"), data2, {
   397        xaxis: {
   398            
   399        },
   400        yaxis: {
   401            
   402        },
   403        grid: {
   404            hoverable: true,
   405            clickable: false,
   406            borderWidth: 0
   407        },
   408        legend: {
   409            labelBoxBorderColor: "none",
   410            position: "left"
   411        },
   412        series: {
   413            shadowSize: 1
   414        },
   415        tooltip: true,
   416    });
   417  
   418    // pie
   419  
   420    var da = [
   421      {
   422        label: "iPhone5S",
   423        data: 40
   424      },    
   425      {
   426        label: "iPad Mini",
   427        data: 10
   428      },
   429      {
   430        label: "iPad Mini Retina",
   431        data: 20
   432      },
   433      {
   434        label: "iPhone4S",
   435        data: 12
   436      },
   437      {
   438        label: "iPad Air",
   439        data: 18
   440      }
   441    ], 
   442    da1 = [],
   443    series = Math.floor(Math.random() * 4) + 3;
   444  
   445    for (var i = 0; i < series; i++) {
   446      da1[i] = {
   447        label: "Series" + (i + 1),
   448        data: Math.floor(Math.random() * 100) + 1
   449      }
   450    }
   451  
   452    $("#flot-pie-donut").length && $.plot($("#flot-pie-donut"), da, {
   453      series: {
   454        pie: {
   455          innerRadius: 0.4,
   456          show: true,
   457          stroke: {
   458            width: 0
   459          },
   460          label: {
   461            show: true,
   462            threshold: 0.05
   463          },
   464  
   465        }
   466      },
   467      colors: ["#65b5c2","#4da7c1","#3993bb","#2e7bad","#23649e"],
   468      grid: {
   469          hoverable: true,
   470          clickable: false
   471      },
   472      tooltip: true,
   473      tooltipOpts: {
   474        content: "%s: %p.0%"
   475      }
   476    });
   477  
   478    $("#flot-pie").length && $.plot($("#flot-pie"), da, {
   479      series: {
   480        pie: {
   481          combine: {
   482                color: "#999",
   483                threshold: 0.05
   484              },
   485          show: true
   486        }
   487      },    
   488      colors: ["#65b5c2","#4da7c1","#3993bb","#2e7bad","#23649e"],
   489      legend: {
   490        show: false
   491      },
   492      grid: {
   493          hoverable: true,
   494          clickable: false
   495      },
   496      tooltip: true,
   497      tooltipOpts: {
   498        content: "%s: %p.0%"
   499      }
   500    });
   501  
   502  });