{"id":2298,"date":"2020-12-04T14:46:23","date_gmt":"2020-12-04T05:46:23","guid":{"rendered":"https:\/\/qol-kk.com\/wp2\/?p=2298"},"modified":"2020-12-04T14:46:23","modified_gmt":"2020-12-04T05:46:23","slug":"post-2298","status":"publish","type":"post","link":"https:\/\/qol-kk.com\/wp2\/blog\/2020\/12\/04\/post-2298\/","title":{"rendered":"\u3010Bootstrap\u3011\u304b\u3063\u3053\u3044\u3044\u30c6\u30f3\u30d7\u30ec Gentelella \u3092\u898b\u3064\u3051\u305f\u306e\u3067\u89e3\u6790\u2460"},"content":{"rendered":"<h2>\u3010Bootstrap\u3011\u304b\u3063\u3053\u3044\u3044\u30c6\u30f3\u30d7\u30ec Gentelella \u3092\u898b\u3064\u3051\u305f\u306e\u3067\u89e3\u6790\u2460<\/h2>\n<p><a href=\"https:\/\/colorlib.com\/polygon\/gentelella\/index.html\">Gentelella\u306e\u30c7\u30e2\u30da\u30fc\u30b8\u306f\u30b3\u30b3<\/a><\/p>\n<p>\u3053\u306e\u4e2d\u306eDashboard2\u306e\u30b0\u30e9\u30d5\u3092\u4f7f\u3046\u306b\u3042\u305f\u3063\u3066\u3001\u3069\u3046\u52d5\u3044\u3066\u3044\u308b\u304b\u3092\u8abf\u3079\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n<h3>\u8a72\u5f53\u306e\u30c7\u30b6\u30a4\u30f3\u7b87\u6240<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"2299\" data-permalink=\"https:\/\/qol-kk.com\/wp2\/blog\/2020\/12\/04\/post-2298\/image1-9\/\" data-orig-file=\"https:\/\/qol-kk.com\/wp2\/wp-content\/uploads\/2020\/12\/image1.png\" data-orig-size=\"1265,595\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/qol-kk.com\/wp2\/wp-content\/uploads\/2020\/12\/image1-1024x482.png\" class=\"alignnone size-large wp-image-2299\" src=\"https:\/\/qol-kk.com\/wp2\/wp-content\/uploads\/2020\/12\/image1-1024x482.png\" alt=\"\" width=\"1024\" height=\"482\" srcset=\"https:\/\/qol-kk.com\/wp2\/wp-content\/uploads\/2020\/12\/image1-1024x482.png 1024w, https:\/\/qol-kk.com\/wp2\/wp-content\/uploads\/2020\/12\/image1-300x141.png 300w, https:\/\/qol-kk.com\/wp2\/wp-content\/uploads\/2020\/12\/image1-768x361.png 768w, https:\/\/qol-kk.com\/wp2\/wp-content\/uploads\/2020\/12\/image1.png 1265w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h3>\u8a72\u5f53\u7b87\u6240\u306e\u30b3\u30fc\u30c9<\/h3>\n<pre class=\"lang:default decode:true\">&lt;div class=\"row\"&gt;\r\n&lt;div class=\"col-md-12\"&gt;\r\n&lt;div class=\"x_panel\"&gt;\r\n&lt;div class=\"x_title\"&gt;\r\n&lt;h2&gt;Transaction Summary &lt;small&gt;Weekly progress&lt;\/small&gt;&lt;\/h2&gt;\r\n&lt;div class=\"filter\"&gt;\r\n&lt;div id=\"reportrange\" class=\"pull-right\" style=\"background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc\"&gt;\r\n&lt;i class=\"glyphicon glyphicon-calendar fa fa-calendar\"&gt;&lt;\/i&gt;\r\n&lt;span&gt;December 30, 2014 - January 28, 2015&lt;\/span&gt; &lt;b class=\"caret\"&gt;&lt;\/b&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"clearfix\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"x_content\"&gt;\r\n&lt;div class=\"col-md-9 col-sm-12 \"&gt;\r\n&lt;div class=\"demo-container\" style=\"height:280px\"&gt;\r\n&lt;div id=\"chart_plot_02\" class=\"demo-placeholder\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"tiles\"&gt;\r\n&lt;div class=\"col-md-4 tile\"&gt;\r\n&lt;span&gt;Total Sessions&lt;\/span&gt;\r\n &lt;h2&gt;231,809&lt;\/h2&gt;\r\n&lt;span class=\"sparkline11 graph\" style=\"height: 160px;\"&gt;\r\n&lt;canvas width=\"200\" height=\"60\" style=\"display: inline-block; vertical-align: top; width: 94px; height: 30px;\"&gt;&lt;\/canvas&gt;\r\n&lt;\/span&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"col-md-4 tile\"&gt;\r\n&lt;span&gt;Total Revenue&lt;\/span&gt;\r\n&lt;h2&gt;$231,809&lt;\/h2&gt;\r\n&lt;span class=\"sparkline22 graph\" style=\"height: 160px;\"&gt;\r\n&lt;canvas width=\"200\" height=\"60\" style=\"display: inline-block; vertical-align: top; width: 94px; height: 30px;\"&gt;&lt;\/canvas&gt;\r\n&lt;\/span&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"col-md-4 tile\"&gt;\r\n&lt;span&gt;Total Sessions&lt;\/span&gt;\r\n&lt;h2&gt;231,809&lt;\/h2&gt;\r\n&lt;span class=\"sparkline11 graph\" style=\"height: 160px;\"&gt;\r\n&lt;canvas width=\"200\" height=\"60\" style=\"display: inline-block; vertical-align: top; width: 94px; height: 30px;\"&gt;&lt;\/canvas&gt;\r\n&lt;\/span&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"col-md-3 col-sm-12 \"&gt;\r\n&lt;div&gt;\r\n&lt;div class=\"x_title\"&gt;\r\n&lt;h2&gt;Top Profiles&lt;\/h2&gt;\r\n&lt;ul class=\"nav navbar-right panel_toolbox\"&gt;\r\n&lt;li&gt;&lt;a class=\"collapse-link\"&gt;&lt;i class=\"fa fa-chevron-up\"&gt;&lt;\/i&gt;&lt;\/a&gt;\r\n&lt;\/li&gt;\r\n&lt;li class=\"dropdown\"&gt;\r\n&lt;a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\" role=\"button\" aria-expanded=\"false\"&gt;&lt;i class=\"fa fa-wrench\"&gt;&lt;\/i&gt;&lt;\/a&gt;\r\n&lt;div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButton\"&gt;\r\n&lt;a class=\"dropdown-item\" href=\"#\"&gt;Settings 1&lt;\/a&gt;\r\n&lt;a class=\"dropdown-item\" href=\"#\"&gt;Settings 2&lt;\/a&gt;\r\n&lt;\/div&gt;\r\n&lt;\/li&gt;\r\n&lt;li&gt;&lt;a class=\"close-link\"&gt;&lt;i class=\"fa fa-close\"&gt;&lt;\/i&gt;&lt;\/a&gt;\r\n&lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n&lt;div class=\"clearfix\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;ul class=\"list-unstyled top_profiles scroll-view\"&gt;\r\n&lt;li class=\"media event\"&gt;\r\n&lt;a class=\"pull-left border-aero profile_thumb\"&gt;\r\n&lt;i class=\"fa fa-user aero\"&gt;&lt;\/i&gt;\r\n&lt;\/a&gt;\r\n&lt;div class=\"media-body\"&gt;\r\n&lt;a class=\"title\" href=\"#\"&gt;Ms. Mary Jane&lt;\/a&gt;\r\n&lt;p&gt;&lt;strong&gt;$2300. &lt;\/strong&gt; Agent Avarage Sales &lt;\/p&gt;\r\n&lt;p&gt; &lt;small&gt;12 Sales Today&lt;\/small&gt;\r\n&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n&lt;\/li&gt;\r\n&lt;li class=\"media event\"&gt;\r\n&lt;a class=\"pull-left border-green profile_thumb\"&gt;\r\n&lt;i class=\"fa fa-user green\"&gt;&lt;\/i&gt;\r\n&lt;\/a&gt;\r\n&lt;div class=\"media-body\"&gt;\r\n&lt;a class=\"title\" href=\"#\"&gt;Ms. Mary Jane&lt;\/a&gt;\r\n&lt;p&gt;&lt;strong&gt;$2300. &lt;\/strong&gt; Agent Avarage Sales &lt;\/p&gt;\r\n&lt;p&gt; &lt;small&gt;12 Sales Today&lt;\/small&gt;\r\n&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n&lt;\/li&gt;\r\n&lt;li class=\"media event\"&gt;\r\n&lt;a class=\"pull-left border-blue profile_thumb\"&gt;\r\n&lt;i class=\"fa fa-user blue\"&gt;&lt;\/i&gt;\r\n&lt;\/a&gt;\r\n&lt;div class=\"media-body\"&gt;\r\n&lt;a class=\"title\" href=\"#\"&gt;Ms. Mary Jane&lt;\/a&gt;\r\n&lt;p&gt;&lt;strong&gt;$2300. &lt;\/strong&gt; Agent Avarage Sales &lt;\/p&gt;\r\n&lt;p&gt; &lt;small&gt;12 Sales Today&lt;\/small&gt;\r\n&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n&lt;\/li&gt;\r\n&lt;li class=\"media event\"&gt;\r\n&lt;a class=\"pull-left border-aero profile_thumb\"&gt;\r\n&lt;i class=\"fa fa-user aero\"&gt;&lt;\/i&gt;\r\n&lt;\/a&gt;\r\n&lt;div class=\"media-body\"&gt;\r\n&lt;a class=\"title\" href=\"#\"&gt;Ms. Mary Jane&lt;\/a&gt;\r\n&lt;p&gt;&lt;strong&gt;$2300. &lt;\/strong&gt; Agent Avarage Sales &lt;\/p&gt;\r\n&lt;p&gt; &lt;small&gt;12 Sales Today&lt;\/small&gt;\r\n&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n&lt;\/li&gt;\r\n&lt;li class=\"media event\"&gt;\r\n&lt;a class=\"pull-left border-green profile_thumb\"&gt;\r\n&lt;i class=\"fa fa-user green\"&gt;&lt;\/i&gt;\r\n&lt;\/a&gt;\r\n&lt;div class=\"media-body\"&gt;\r\n&lt;a class=\"title\" href=\"#\"&gt;Ms. Mary Jane&lt;\/a&gt;\r\n&lt;p&gt;&lt;strong&gt;$2300. &lt;\/strong&gt; Agent Avarage Sales &lt;\/p&gt;\r\n&lt;p&gt; &lt;small&gt;12 Sales Today&lt;\/small&gt;\r\n&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n&lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>\u3053\u306e\u3046\u3061\u3001\u30e1\u30a4\u30f3\u306e\u30b0\u30e9\u30d5\u3092\u4f5c\u3063\u3066\u3044\u308b\u306e\u304c16\uff5e18\u884c\u76ee\u3067\u3057\u305f\u3002<\/p>\n<pre class=\"lang:default decode:true\">&lt;div class=\"demo-container\" style=\"height:280px\"&gt;\r\n  &lt;div id=\"chart_plot_02\" class=\"demo-placeholder\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<h3>demo-container\u306e\u898b\u3066\u3044\u308b\u5834\u6240<\/h3>\n<p>\u3053\u308c\u306f\u5f8c\u7a0b\u51fa\u3066\u304f\u308b Flot \u306eexamples\\example.css\u3092\u898b\u3066\u3044\u307e\u3057\u305f\u3002<br \/>\nCSS\u306e\u4e2d\u8eab\u306f\u3053\u3093\u306a\u611f\u3058\u3002\u203bdemo-plaveholder \u3082\u3059\u3050\u8fd1\u304f\u3067\u898b\u3064\u3051\u307e\u3057\u305f\u3002<\/p>\n<p>\u4f46\u3057\u3001\u30c7\u30e2\u30b5\u30a4\u30c8\u4e0a\u3067\u306f\u3053\u306e\u5834\u6240\u3078\u306e\u30ea\u30f3\u30af\u3092\u8cbc\u3063\u3066\u3044\u306a\u3044\u306e\u3067\u5b9f\u969b\u306b\u306f\u610f\u5473\u306e\u306a\u3044class\u306e\u69d8\u3067\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true\">.demo-container {\r\n\tbox-sizing: border-box;\r\n\twidth: 850px;\r\n\theight: 400px;\r\n\tpadding: 20px 15px 15px 15px;\r\n\tmargin: 15px auto 30px auto;\r\n\tborder: 1px solid #ddd;\r\n\tbackground: #fff;\r\n\tbackground: linear-gradient(#f6f6f6 0, #fff 50px);\r\n\tbackground: -o-linear-gradient(#f6f6f6 0, #fff 50px);\r\n\tbackground: -ms-linear-gradient(#f6f6f6 0, #fff 50px);\r\n\tbackground: -moz-linear-gradient(#f6f6f6 0, #fff 50px);\r\n\tbackground: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);\r\n\tbox-shadow: 0 3px 10px rgba(0,0,0,0.15);\r\n\t-o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);\r\n\t-ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);\r\n\t-moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);\r\n\t-webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);\r\n}\r\n\r\n.demo-placeholder {\r\n        width: 100%;\r\n        height: 100%;\r\n        font-size: 14px;\r\n        line-height: 1.2em;\r\n}<\/pre>\n<h3>demo-placeholder\u306e\u898b\u3066\u3044\u308b\u5834\u6240<\/h3>\n<p>Flot \u306eexamples\\example.css\u306b\u3082\u8a18\u8f09\u304c\u3042\u308a\u307e\u3057\u305f\u304c\u3001\u3082\u30461\u304b\u6240\u8a18\u8f09\u304c\u898b\u3064\u304b\u308a\u307e\u3057\u305f\u3002<br \/>\n<a class=\"html-attribute-value html-resource-link\" href=\"https:\/\/colorlib.com\/polygon\/build\/css\/custom.min.css\" target=\"_blank\" rel=\"noreferrer noopener\">..\/build\/css\/custom.min.css<\/a><\/p>\n<p>\u3053\u3061\u3089\u306f\u3057\u3063\u304b\u308a\u3068\u30ea\u30f3\u30af\u304c\u8cbc\u3089\u308c\u3066\u3044\u308b\u306e\u3067\u751f\u304d\u3066\u3044\u307e\u3059\u304c\u3001\u3084\u3063\u3066\u3044\u308b\u4e8b\u306f\u9ad8\u3055\u306e\u6307\u5b9a\u306e\u307f\u3067\u3057\u305f\u3002<\/p>\n<pre class=\"lang:default decode:true \">.demo-placeholder{height:280px}<\/pre>\n<h3>id=\"chart_plot_02\" \u306e\u898b\u3066\u3044\u308b\u5834\u6240<\/h3>\n<p><a class=\"html-attribute-value html-resource-link\" href=\"https:\/\/colorlib.com\/polygon\/build\/js\/custom.min.js\" target=\"_blank\" rel=\"noreferrer noopener\">..\/build\/js\/custom.min.js<\/a> \u306e\u4e2d\u306b\u5024\u304c\u3042\u308a\u307e\u3057\u305f\u3002<\/p>\n<pre class=\"lang:default decode:true\">function gd(year, month, day) {\r\n    return new Date(year, month - 1, day).getTime();\r\n}\r\n\r\nfunction init_flot_chart() {\r\n\r\n    if (typeof($.plot) === 'undefined') {\r\n        return;\r\n    }\r\n\r\n    console.log('init_flot_chart');\r\n\r\n    var arr_data1 = [\r\n        [gd(2012, 1, 1), 17],\r\n        [gd(2012, 1, 2), 74],\r\n        [gd(2012, 1, 3), 6],\r\n        [gd(2012, 1, 4), 39],\r\n        [gd(2012, 1, 5), 20],\r\n        [gd(2012, 1, 6), 85],\r\n        [gd(2012, 1, 7), 7]\r\n    ];\r\n\r\n    var arr_data2 = [\r\n        [gd(2012, 1, 1), 82],\r\n        [gd(2012, 1, 2), 23],\r\n        [gd(2012, 1, 3), 66],\r\n        [gd(2012, 1, 4), 9],\r\n        [gd(2012, 1, 5), 119],\r\n        [gd(2012, 1, 6), 6],\r\n        [gd(2012, 1, 7), 9]\r\n    ];\r\n\r\n    var arr_data3 = [\r\n        [0, 1],\r\n        [1, 9],\r\n        [2, 6],\r\n        [3, 10],\r\n        [4, 5],\r\n        [5, 17],\r\n        [6, 6],\r\n        [7, 10],\r\n        [8, 7],\r\n        [9, 11],\r\n        [10, 35],\r\n        [11, 9],\r\n        [12, 12],\r\n        [13, 5],\r\n        [14, 3],\r\n        [15, 4],\r\n        [16, 9]\r\n    ];\r\n\r\n    var chart_plot_02_data = [ ];\r\n\r\n    var chart_plot_03_data = [\r\n        [0, 1],\r\n        [1, 9],\r\n        [2, 6],\r\n        [3, 10],\r\n        [4, 5],\r\n        [5, 17],\r\n        [6, 6],\r\n        [7, 10],\r\n        [8, 7],\r\n        [9, 11],\r\n        [10, 35],\r\n        [11, 9],\r\n        [12, 12],\r\n        [13, 5],\r\n        [14, 3],\r\n        [15, 4],\r\n        [16, 9]\r\n    ];\r\n\r\n    for (var i = 0; i &lt; 30; i++) {\r\n        chart_plot_02_data.push([\r\n            new Date(Date.today().add(i).days()).getTime(), randNum() + i + i + 10\r\n        ]);\r\n    }\r\n\r\n    var chart_plot_01_settings = {\r\n        series: {\r\n            lines: {\r\n                show: false,\r\n                fill: true\r\n            },\r\n            splines: {\r\n                show: true,\r\n                tension: 0.4,\r\n                lineWidth: 1,\r\n                fill: 0.4\r\n            },\r\n            points: {\r\n                radius: 0,\r\n                show: true\r\n            },\r\n            shadowSize: 2\r\n        },\r\n        grid: {\r\n            verticalLines: true,\r\n            hoverable: true,\r\n            clickable: true,\r\n            tickColor: \"#d5d5d5\",\r\n            borderWidth: 1,\r\n            color: '#fff'\r\n        },\r\n        colors: [\"rgba(38, 185, 154, 0.38)\", \"rgba(3, 88, 106, 0.38)\"],\r\n        xaxis: {\r\n            tickColor: \"rgba(51, 51, 51, 0.06)\",\r\n            mode: \"time\",\r\n            tickSize: [1, \"day\"],\r\n            \/\/tickLength: 10,\r\n            axisLabel: \"Date\",\r\n            axisLabelUseCanvas: true,\r\n            axisLabelFontSizePixels: 12,\r\n            axisLabelFontFamily: 'Verdana, Arial',\r\n            axisLabelPadding: 10\r\n        },\r\n        yaxis: {\r\n            ticks: 8,\r\n            tickColor: \"rgba(51, 51, 51, 0.06)\",\r\n        },\r\n        tooltip: true\r\n    };\r\n\r\n    var chart_plot_02_settings = {\r\n        grid: {\r\n            show: true,\r\n            aboveData: true,\r\n            color: \"#3f3f3f\",\r\n            labelMargin: 10,\r\n            axisMargin: 0,\r\n            borderWidth: 0,\r\n            borderColor: null,\r\n            minBorderMargin: 5,\r\n            clickable: true,\r\n            hoverable: true,\r\n            autoHighlight: true,\r\n            mouseActiveRadius: 100\r\n        },\r\n        series: {\r\n            lines: {\r\n                show: true,\r\n                fill: true,\r\n                lineWidth: 2,\r\n                steps: false\r\n            },\r\n            points: {\r\n                show: true,\r\n                radius: 4.5,\r\n                symbol: \"circle\",\r\n                lineWidth: 3.0\r\n            }\r\n        },\r\n        legend: {\r\n            position: \"ne\",\r\n            margin: [0, -25],\r\n            noColumns: 0,\r\n            labelBoxBorderColor: null,\r\n            labelFormatter: function(label, series) {\r\n                return label + '&amp;nbsp;&amp;nbsp;';\r\n            },\r\n            width: 40,\r\n            height: 1\r\n        },\r\n        colors: ['#96CA59', '#3F97EB', '#72c380', '#6f7a8a', '#f7cb38', '#5a8022', '#2c7282'],\r\n        shadowSize: 0,\r\n        tooltip: true,\r\n        tooltipOpts: {\r\n            content: \"%s: %y.0\",\r\n            xDateFormat: \"%d\/%m\",\r\n            shifts: {\r\n                x: -30,\r\n                y: -50\r\n            },\r\n            defaultTheme: false\r\n        },\r\n        yaxis: {\r\n            min: 0\r\n        },\r\n        xaxis: {\r\n            mode: \"time\",\r\n            minTickSize: [1, \"day\"],\r\n            timeformat: \"%d\/%m\/%y\",\r\n            min: chart_plot_02_data[0][0],\r\n            max: chart_plot_02_data[20][0]\r\n        }\r\n    };\r\n\r\n    var chart_plot_03_settings = {\r\n        series: {\r\n            curvedLines: {\r\n                apply: true,\r\n                active: true,\r\n                monotonicFit: true\r\n            }\r\n        },\r\n        colors: [\"#26B99A\"],\r\n        grid: {\r\n            borderWidth: {\r\n                top: 0,\r\n                right: 0,\r\n                bottom: 1,\r\n                left: 1\r\n            },\r\n            borderColor: {\r\n                bottom: \"#7F8790\",\r\n                left: \"#7F8790\"\r\n            }\r\n        }\r\n    };\r\n\r\n\r\n    if ($(\"#chart_plot_01\").length) {\r\n        console.log('Plot1 - testing...');\r\n\r\n        var stuff = $(\"#chart_plot_01\").data('stuff');\r\n        \/\/ alert(stuff);\r\n\r\n        \/\/ console.log()\r\n\r\n        $.plot($(\"#chart_plot_01\"), [arr_data1, arr_data2], chart_plot_01_settings);\r\n    }\r\n\r\n\r\n    if ($(\"#chart_plot_02\").length) {\r\n        console.log('Plot2');\r\n\r\n        $.plot($(\"#chart_plot_02\"), [{\r\n            label: \"Email Sent\",\r\n            data: chart_plot_02_data,\r\n            lines: {\r\n                fillColor: \"rgba(150, 202, 89, 0.12)\"\r\n            },\r\n            points: {\r\n                fillColor: \"#fff\"\r\n            }\r\n        }], chart_plot_02_settings);\r\n\r\n    }\r\n\r\n    if ($(\"#chart_plot_03\").length) {\r\n        console.log('Plot3');\r\n\r\n\r\n        $.plot($(\"#chart_plot_03\"), [{\r\n            label: \"Registrations\",\r\n            data: chart_plot_03_data,\r\n            lines: {\r\n                fillColor: \"rgba(150, 202, 89, 0.12)\"\r\n            },\r\n            points: {\r\n                fillColor: \"#fff\"\r\n            }\r\n        }], chart_plot_03_settings);\r\n\r\n    };\r\n}<\/pre>\n<p>\u5177\u4f53\u7684\u306a\u52d5\u4f5c\u306f226\uff5e240\u884c\u76ee \u3010$.plot \u3011\u3092\u52d5\u304b\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n$.plot\u306f\u4f55\u8005\u304b\u3068\u8a00\u3046\u3068\u3001<a href=\"https:\/\/www.flotcharts.org\/\">Flot.js<\/a>\u3068\u3044\u3046\u30b0\u30e9\u30d5\u4f5c\u6210\u7528\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u306b\u5b58\u5728\u3057\u3066\u3044\u307e\u3057\u305f\u3002<br \/>\n<a class=\"html-attribute-value html-resource-link\" href=\"https:\/\/colorlib.com\/polygon\/vendors\/Flot\/jquery.flot.js\" target=\"_blank\" rel=\"noreferrer noopener\">..\/vendors\/Flot\/jquery.flot.js<\/a>\u00a0\u3053\u306e\u4e2d\u306e\u4e0b\u306e\u7b87\u6240<\/p>\n<pre class=\"lang:default decode:true\">    $.plot = function(placeholder, data, options) {\r\n        \/\/var t0 = new Date();\r\n        var plot = new Plot($(placeholder), data, options, $.plot.plugins);\r\n        \/\/(window.console ? console.log : alert)(\"time used (msecs): \" + ((new Date()).getTime() - t0.getTime()));\r\n        return plot;\r\n    };<\/pre>\n<p>\u305d\u306e\u70ba\u306e\u30c7\u30fc\u30bf\u306e\u6210\u5f62\u304c266\u884c\u76ee\u3088\u308a\u4e0a\u306b\u8a18\u8f09\u3055\u308c\u3066\u3044\u308b\u3088\u3046\u3067\u3059\u3002<\/p>\n<h3>\u307e\u3068\u3081<\/h3>\n<p>Gentelella \u306f\u30ab\u30c3\u30b3\u3044\u3044\u3051\u3069\u4f7f\u3063\u3066\u3044\u308b(\u4f7f\u3048\u308b)\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u6570\u3082\u591a\u3044\u3057\u3001\u4f5c\u6210\u30b5\u30a4\u30c8\u69d8\u306b\u53d6\u6368\u9078\u629e\u3057\u306a\u3044\u3068JS\u30d5\u30a1\u30a4\u30eb\u304c\u99ac\u9e7f\u30c7\u30ab\u304f\u306a\u3063\u3066\u3057\u307e\u3044\u307e\u3059\u3002<\/p>\n<p>\u3053\u3046\u3084\u3063\u3066\u4f7f\u3046\u30e2\u30ce\u3092\u9078\u629e\u3057\u3066\u8abf\u67fb\u3057\u3066\u96c6\u7d04\u3059\u308b\u3068\u3001\u305d\u306e\u904e\u7a0b\u3067\u8272\u3005\u64cd\u308c\u308b\u3088\u3046\u306b\u306a\u308b\u306e\u3067\u3046\u308c\u3057\u3044\u3067\u3059\u3002<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u3010Bootstrap\u3011\u304b\u3063\u3053\u3044\u3044\u30c6\u30f3\u30d7\u30ec Gentelella \u3092\u898b\u3064\u3051\u305f\u306e\u3067\u89e3\u6790\u2460 Gentelella\u306e\u30c7\u30e2\u30da\u30fc\u30b8\u306f\u30b3\u30b3 \u3053\u306e\u4e2d\u306eDashboard2\u306e\u30b0\u30e9\u30d5\u3092\u4f7f\u3046\u306b\u3042\u305f\u3063\u3066\u3001\u3069\u3046\u52d5\u3044\u3066\u3044\u308b\u304b\u3092\u8abf\u3079\u3066\u307f\u307e\u3057\u305f\u3002 \u8a72\u5f53 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2281,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","sitemap_hide":"","_veu_custom_css":"","veu_display_promotion_alert":"","vkexunit_cta_each_option":"","_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[36],"tags":[845,858,856,365,857,63,58,67],"class_list":["post-2298","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-memorandum","tag-bootstrap4","tag-flot","tag-gentelella","tag-javascript","tag-857","tag-63","tag-58","tag-67"],"veu_head_title_object":{"title":"","add_site_title":""},"jetpack_publicize_connections":[],"jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/qol-kk.com\/wp2\/wp-content\/uploads\/2020\/12\/bootstrap.gif","_links":{"self":[{"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/posts\/2298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/comments?post=2298"}],"version-history":[{"count":0,"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/posts\/2298\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/media\/2281"}],"wp:attachment":[{"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/media?parent=2298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/categories?post=2298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/tags?post=2298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}