From 74b6b37ef2890e716998a66b91e65b247aedec72 Mon Sep 17 00:00:00 2001 From: Richard Wall Date: Tue, 20 Jul 2010 06:10:04 +0100 Subject: Move the legend beneath the graph where there is more room for a large number of labels --- assets/css/style.css | 30 +++++++++++++++++++++++++----- index.html | 4 +++- jarmon.js | 49 +++++++++++++++++++++++++++++++++---------------- 3 files changed, 61 insertions(+), 22 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 8f5798e..f1c21ef 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -13,6 +13,11 @@ h2 { margin: 20px auto 5px auto; font-size: 14px; text-align: left; + clear: both; +} + +p, li, dt, dd, td, th, div { + font-size: 12px; } .loading { @@ -33,22 +38,37 @@ h2 { margin: 0 auto 0 auto; } -.chart canvas { -} - .tickLabel { width:50px; overflow:hidden; } -.legendLabel { +.graph-legend { + width: 790px; + padding: 5px 0 5px 0; + margin: 10px auto 0 auto; + background-color: #f7f7f7; + position: relative; + left: 25px; +} + +.graph-legend .legendItem { + float: left; cursor: pointer; + margin-right: 20px; + margin-top: 5px; + margin-left: 5px; } -.legend .disabled { +.graph-legend .disabled { text-decoration: line-through; } +.graph-legend .legendColorBox { + float: left; + margin-right: 5px; +} + input[type=checkbox] { margin: 0; padding: 0; diff --git a/index.html b/index.html index 6018af7..913dfe4 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - @@ -17,6 +17,7 @@