diff options
| author | Takayuki MATSUOKA <takayuki.matsuoka@gmail.com> | 2015-04-02 07:17:35 (GMT) |
|---|---|---|
| committer | Takayuki MATSUOKA <takayuki.matsuoka@gmail.com> | 2015-04-02 07:17:35 (GMT) |
| commit | 02e130312d6c36dc5c97a12a29700be102ae0583 (patch) | |
| tree | ce33ecb38fe86868a5d20a5ad419d479c4154b89 /js | |
| parent | 5987cb92745c0577f3a352e5cd27ae35ef8df9d9 (diff) | |
| download | lz4-02e130312d6c36dc5c97a12a29700be102ae0583.zip lz4-02e130312d6c36dc5c97a12a29700be102ae0583.tar.gz lz4-02e130312d6c36dc5c97a12a29700be102ae0583.tar.bz2 | |
Add js/chartselector.js
Diffstat (limited to 'js')
| -rw-r--r-- | js/chartselector.js | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/js/chartselector.js b/js/chartselector.js new file mode 100644 index 0000000..67c81aa --- /dev/null +++ b/js/chartselector.js @@ -0,0 +1,57 @@ +/*
+Usage:
+
+Add data-chartselector-chart-id="YOUR-CHART-ID" as buttons attibute.
+
+ <button data-chartselector-chart-id="my-chart-1" type="button" class="btn btn-primary">Test Chart #1</button>
+ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ~~~~~~~~~~~~
+
+ <button data-chartselector-chart-id="my-chart-2" type="button" class="btn btn-primary">Test Chart #2</button>
+ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ~~~~~~~~~~~~
+
+Create parent <div> as chart group and child <div> as chart entity.
+
+ <div id="my-chart-group-1" class="chartselector-group">
+ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ <div id="my-chart-1" class="chartselector-chart" data-csv-props='{...}'></div>
+ ~~~~~~~~~~~~ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ <div id="my-chart-2" class="chartselector-chart" data-csv-props='{...}'></div>
+ ~~~~~~~~~~~~ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ </div>
+*/
+(function($) {
+ $(document).ready(function() {
+ $("button[data-chartselector-chart-id]").click(function() {
+ var chartId = $(this).attr("data-chartselector-chart-id");
+ showChart(chartId);
+ });
+ });
+
+ function showChart(chartId) {
+ var e = $("#" + chartId);
+ var p = e.closest(".chartselector-group");
+ var divs = p.children(".chartselector-chart");
+ divs.each(function() {
+ if(this.id == chartId) {
+ $(this).css("display", "block");
+ $(this).css("visibility", "visible");
+ } else {
+ $(this).css("display", "none");
+ }
+ });
+ }
+
+ var cssStyleText = '\
+ .chartselector-group { \
+ position: relative; \
+ } \
+ \
+ .chartselector-chart { \
+ position: absolute; \
+ width: 100%; \
+ height: 100%; \
+ } \
+ ';
+
+ $("<style>").prop("type", "text/css").html(cssStyleText).appendTo("head");
+})(jQuery);
|