|
|
"use strict";$(document).ready(function() { $(window).on('resize', function() { categoryChart(); strackingChart(); pieChart(); donutChart(); }); categoryChart(); strackingChart(); pieChart(); donutChart(); /*categories chart*/ function categoryChart() { var data = [ ["January", 20], ["February", 8], ["March", 4], ["April", 13], ["May", 5], ["June", 9] ]; $.plot("#placeholder", [data], { series: { bars: { show: true, barWidth: 0.6, align: "center", } }, xaxis: { mode: "categories", tickLength: 0, tickColor: '#f5f5f5', }, colors: ["#01C0C8", "#83D6DE"], labelBoxBorderColor: "red" }); }; /*Stracking chart*/ function strackingChart() { var d1 = []; for (var i = 0; i <= 10; i += 1) { d1.push([i, parseInt(Math.random() * 30)]); /*yellow*/ } var d2 = []; for (var i = 0; i <= 10; i += 1) { d2.push([i, parseInt(Math.random() * 30)]); /*blue*/ } var d3 = []; for (var i = 0; i <= 10; i += 1) { d3.push([i, parseInt(Math.random() * 30)]); /*red*/ } var stack = 0, bars = false, lines = true, steps = false;
function plotWithOptions() { $.plot("#placeholder1", [d1, d2, d3], { series: { stack: stack, lines: { show: lines, fill: true, steps: steps }, bars: { show: bars, barWidth: 0.6 } } }); } plotWithOptions(); }; /*pie chart-Withour legend*/ function pieChart() { var data1 = [{ label: "Sales & Marketing", data: 2034, color: "#25A6F7" }, { label: "Research & Development", data: 16410, color: "#01C0C8" }, { label: "General & Administration", data: 4670, color: "#42E1FE" }]; $.plot('#placeholder2', data1, { series: { pie: { show: true } }, legend: { show: false } }); }; /*Donut Hole*/ function donutChart() { var data2 = [{ label: "Sales & Marketing", data: 2034, color: "#FB9678" }, { label: "Research & Development", data: 16410, color: "#4F5467" }, { label: "General & Administration", data: 4670, color: "#01C0C8" }]; $.plot('#placeholder3', data2, { series: { pie: { innerRadius: 0.7, show: true }, legend: { show: true, position: "center" } } }); } // series types chart
$(function() { var d1 = []; for (var i = 0; i < 14; i += 0.5) { d1.push([i, Math.sin(i)]); } var d2 = [ [0, 3], [4, 8], [8, 5], [9, 13] ]; var d3 = []; for (var i = 0; i < 14; i += 0.5) { d3.push([i, Math.cos(i)]); } var d4 = []; for (var i = 0; i < 14; i += 0.1) { d4.push([i, Math.sqrt(i * 10)]); } var d5 = []; for (var i = 0; i < 14; i += 0.5) { d5.push([i, Math.sqrt(i)]); } var d6 = []; for (var i = 0; i < 14; i += 0.5 + Math.random()) { d6.push([i, Math.sqrt(2 * i + Math.sin(i) + 5)]); } $.plot("#seriestypes", [{ data: d1, lines: { show: true, fill: true } }, { data: d2, bars: { show: true } }, { data: d3, points: { show: true } }, { data: d4, lines: { show: true } }, { data: d5, lines: { show: true }, points: { show: true } }, { data: d6, lines: { show: true, steps: true } }]); // Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " – "); }); //real-time update
$(function() { // We use an inline data source in the example, usually data would
// be fetched from a server
var data = [], totalPoints = 300;
function getRandomData() { if (data.length > 0) data = data.slice(1); // Do a random walk
while (data.length < totalPoints) { var prev = data.length > 0 ? data[data.length - 1] : 50, y = prev + Math.random() * 10 - 5; if (y < 0) { y = 0; } else if (y > 100) { y = 100; } data.push(y); } // Zip the generated y values with the x values
var res = []; for (var i = 0; i < data.length; ++i) { res.push([i, data[i]]) } return res; } // Set up the control widget
var updateInterval = 30; $("#updateInterval").val(updateInterval).change(function() { var v = $(this).val(); if (v && !isNaN(+v)) { updateInterval = +v; if (updateInterval < 1) { updateInterval = 1; } else if (updateInterval > 2000) { updateInterval = 2000; } $(this).val("" + updateInterval); } }); var plot = $.plot("#realtimeupdate", [getRandomData()], { series: { shadowSize: 0 // Drawing is faster without shadows
}, yaxis: { min: 0, max: 100 }, xaxis: { show: false } });
function update() { plot.setData([getRandomData()]); // Since the axes don't change, we don't need to call plot.setupGrid()
plot.draw(); setTimeout(update, updateInterval); } update(); // Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " – "); }); //Percentiles
$(function() { var males = { "8%": [ [2, 20.0], [3, 30.3], [4, 40.0], [5, 50.5], [6, 60.7], [7, 70.6], [8, 80.6], [9, 90.3], [10, 100.3], [11, 110.4], [12, 146.5], [13, 151.7], [14, 159.9], [15, 165.4], [16, 167.8], [17, 168.7], [18, 169.5], [19, 168.0] ], "90%": [ [2, 96.8], [3, 105.2], [4, 113.9], [5, 120.8], [6, 127.0], [7, 133.1], [8, 139.1], [9, 143.9], [10, 151.3], [11, 161.1], [12, 164.8], [13, 173.5], [14, 179.0], [15, 182.0], [16, 186.9], [17, 185.2], [18, 186.3], [19, 186.6] ], "25%": [ [2, 89.2], [3, 94.9], [4, 104.4], [5, 111.4], [6, 117.5], [7, 120.2], [8, 127.1], [9, 132.9], [10, 136.8], [11, 144.4], [12, 149.5], [13, 154.1], [14, 163.1], [15, 169.2], [16, 170.4], [17, 171.2], [18, 172.4], [19, 170.8] ], "10%": [ [2, 86.9], [3, 92.6], [4, 99.9], [5, 107.0], [6, 114.0], [7, 113.5], [8, 123.6], [9, 129.2], [10, 133.0], [11, 140.6], [12, 145.2], [13, 149.7], [14, 158.4], [15, 163.5], [16, 166.9], [17, 167.5], [18, 167.1], [19, 165.3] ], "mean": [ [2, 91.9], [3, 98.5], [4, 107.1], [5, 114.4], [6, 120.6], [7, 124.7], [8, 131.1], [9, 136.8], [10, 142.3], [11, 150.0], [12, 154.7], [13, 161.9], [14, 168.7], [15, 173.6], [16, 175.9], [17, 176.6], [18, 176.8], [19, 176.7] ], "75%": [ [2, 94.5], [3, 102.1], [4, 110.8], [5, 117.9], [6, 124.0], [7, 129.3], [8, 134.6], [9, 141.4], [10, 147.0], [11, 156.1], [12, 160.3], [13, 168.3], [14, 174.7], [15, 178.0], [16, 180.2], [17, 181.7], [18, 181.3], [19, 182.5] ], "85%": [ [2, 96.2], [3, 103.8], [4, 111.8], [5, 119.6], [6, 125.6], [7, 131.5], [8, 138.0], [9, 143.3], [10, 149.3], [11, 159.8], [12, 162.5], [13, 171.3], [14, 177.5], [15, 180.2], [16, 183.8], [17, 183.4], [18, 183.5], [19, 185.5] ], "50%": [ [2, 91.9], [3, 98.2], [4, 106.8], [5, 114.6], [6, 120.8], [7, 125.2], [8, 130.3], [9, 137.1], [10, 141.5], [11, 149.4], [12, 153.9], [13, 162.2], [14, 169.0], [15, 174.8], [16, 176.0], [17, 176.8], [18, 176.4], [19, 177.4] ] }; var females = { "15%": [ [2, 84.8], [3, 93.7], [4, 100.6], [5, 105.8], [6, 113.3], [7, 119.3], [8, 124.3], [9, 131.4], [10, 136.9], [11, 143.8], [12, 149.4], [13, 151.2], [14, 152.3], [15, 155.9], [16, 154.7], [17, 157.0], [18, 156.1], [19, 155.4] ], "90%": [ [2, 95.6], [3, 104.1], [4, 111.9], [5, 119.6], [6, 127.6], [7, 133.1], [8, 138.7], [9, 147.1], [10, 152.8], [11, 161.3], [12, 166.6], [13, 167.9], [14, 169.3], [15, 170.1], [16, 172.4], [17, 169.2], [18, 171.1], [19, 172.4] ], "25%": [ [2, 87.2], [3, 95.9], [4, 101.9], [5, 107.4], [6, 114.8], [7, 121.4], [8, 126.8], [9, 133.4], [10, 138.6], [11, 146.2], [12, 152.0], [13, 153.8], [14, 155.7], [15, 158.4], [16, 157.0], [17, 158.5], [18, 158.4], [19, 158.1] ], "10%": [ [2, 84.0], [3, 91.9], [4, 99.2], [5, 105.2], [6, 112.7], [7, 118.0], [8, 123.3], [9, 130.2], [10, 135.0], [11, 141.1], [12, 148.3], [13, 150.0], [14, 150.7], [15, 154.3], [16, 153.6], [17, 155.6], [18, 154.7], [19, 153.1] ], "mean": [ [2, 90.2], [3, 98.3], [4, 105.2], [5, 112.2], [6, 119.0], [7, 125.8], [8, 131.3], [9, 138.6], [10, 144.2], [11, 151.3], [12, 156.7], [13, 158.6], [14, 160.5], [15, 162.1], [16, 162.9], [17, 162.2], [18, 163.0], [19, 163.1] ], "75%": [ [2, 93.2], [3, 101.5], [4, 107.9], [5, 116.6], [6, 122.8], [7, 129.3], [8, 135.2], [9, 143.7], [10, 148.7], [11, 156.9], [12, 160.8], [13, 163.0], [14, 165.0], [15, 165.8], [16, 168.7], [17, 166.2], [18, 167.6], [19, 168.0] ], "85%": [ [2, 94.5], [3, 102.8], [4, 110.4], [5, 119.0], [6, 125.7], [7, 131.5], [8, 137.9], [9, 146.0], [10, 151.3], [11, 159.9], [12, 164.0], [13, 166.5], [14, 167.5], [15, 168.5], [16, 171.5], [17, 168.0], [18, 169.8], [19, 170.3] ], "50%": [ [2, 90.2], [3, 98.1], [4, 105.2], [5, 111.7], [6, 118.2], [7, 125.6], [8, 130.5], [9, 138.3], [10, 143.7], [11, 151.4], [12, 156.7], [13, 157.7], [14, 161.0], [15, 162.0], [16, 162.8], [17, 162.2], [18, 162.8], [19, 163.3] ] }; var dataset = [{ label: "Female mean", data: females["mean"], lines: { show: true }, color: "rgb(255,50,50)" }, { id: "f15%", data: females["1%"], lines: { show: true, lineWidth: 0, fill: false }, color: "rgb(255,50,50)" }, { id: "f25%", data: females["3%"], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "rgb(255,50,50)", fillBetween: "f15%" }, { id: "f50%", data: females["6%"], lines: { show: true, lineWidth: 0.5, fill: 0.4, shadowSize: 0 }, color: "rgb(255,50,50)", fillBetween: "f25%" }, { id: "f75%", data: females["8%"], lines: { show: true, lineWidth: 0, fill: 0.4 }, color: "rgb(255,50,50)", fillBetween: "f50%" }, { id: "f85%", data: females["12%"], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "rgb(255,50,50)", fillBetween: "f75%" }, { label: "Male mean", data: males["mean"], lines: { show: true }, color: "#01C0C8producxt" }, { id: "m15%", data: males["10%"], lines: { show: true, lineWidth: 0, fill: false }, color: "#99E6E9" }, { id: "m25%", data: males["12%"], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "#99E6E9", fillBetween: "m15%" }, { id: "m50%", data: males["20%"], lines: { show: true, lineWidth: 0.5, fill: 0.4, shadowSize: 0 }, color: "rgb(50,50,255)", fillBetween: "m25%" }, { id: "m75%", data: males["22%"], lines: { show: true, lineWidth: 0, fill: 0.4 }, color: "#99E6E9", fillBetween: "m50%" }, { id: "m85%", data: males["25%"], lines: { show: true, lineWidth: 0, fill: 0.2 }, color: "#99E6E9", fillBetween: "m75%" }]; $.plot($("#percentiles"), dataset, { xaxis: { tickDecimals: 0 }, yaxis: { tickFormatter: function(v) { return v + " cm"; } }, legend: { position: "se" } }); // Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " – "); });});
|
