topical media & game development

talk show tell print

lib-jquery-plugin-charts-plugins-dashboard-template.htm / htm



  <div class="dash">
      <form method="post" action="#">
      <div class="myhead">
          <p><a href="#">TOGGLE</a></p>
      </div>
      <div class="mypanel">
          <h3>Chart Type</h3>
          <div class="select">
              <select id="chart-type"><option></option></select>
          </div>
          <h3>Chart Size</h3>
          <div>
                  <h4>Height</h4>
                  <div id="chart-h-p">
                      <p>
                      <a href="#">-</a><span id="chart-h"></span><a href="#">+</a>
                      </p>
                  </div>
                  <h4>Width</h4>
                  <div id="chart-w-p">
                          <p>
                      <a href="#">-</a><span id="chart-w"></span><a href="#">+</a>
                      </p>
                  </div>
          </div>
          <h3>Chart Sources</h3>
          <div class="select">
              <select id="chart-sources"><option></option></select>
          </div>
          <h3>Chart Title</h3>
          <div>
                  <div id="general-options">
                              <h4>Title</h4>
                          <div>
                                  <p><input id="chart-title" name="chart-title" /></p>
                          </div>
                          <h4>Title Style</h4>
                                  <div>
                                  <p id="p-title-size">
                                          <a href="#">-</a><span id="title-size"></span><a href="#">+</a>
                                  </p>
                                          <div>
                                  <div id="f-title-color"></div>
                                  <p>
                                  <label for="title-color">Colors</label>
                                  <input id="title-color" name="title-color" value="#FFFFFF" />
                                  <input class="submit" type="submit" name="change" value="ok" />
                                  </p>
                                          </div>
                          </div>
                      </div>
              </div>
              <h3>Chart Options</h3>
          <div>
                  <div id="general-options">
                      <h4>Axis Step</h4>
                  <div id="p-axis-step">
                      <p>
                      <a href="#">-</a><span id="axis-step"></span><a href="#">+</a>
                      </p>
                  </div>
                  </div>
              <div id="bar-options">
                          <h4>Bar Width</h4>
                          <div id="p-bar-width">
                                  <p>
                              <a href="#">-</a><span id="bar-width"></span><a href="#">+</a>
                              </p>
                          </div>
                          <h4>Bar Spacing</h4>
                          <div id="p-bar-spacing">
                                  <p>
                              <a href="#">-</a><span id="bar-spacing"></span><a href="#">+</a>
                              </p>
                          </div>
                  </div>
                  <div id="line-options">
                          <h4>Fill Area</h4>
                              <div id="p-line-fillarea">
                                  <p>
                              <label for="fill-area">Active : </label><input name="fill-area" id="fill-area" type="checkbox" />
                              </p>
                          </div>
                          <h4>Fill Top</h4>
                          <div id="p-line-fillarea">
                                  <p>
                              <label for="fill-top">Active : </label><input name="fill-top" id="fill-top" type="checkbox" />
                              </p>
                          </div>
                          <h4>Fill Bottom</h4>
                          <div id="p-line-fillarea">
                                  <p>
                              <label for="fill-bottom">Active : </label><input name="fill-bottom" id="fill-bottom" type="checkbox" />
                              </p>
                          </div>
                          <h4>Line-style</h4>
                          <div id="p-line-style">
                                  <p><select id="line-select"></select></p>
                                  <p id="p-line-style-thickness">
                                  <a href="#">-</a><span id="line-style-thickness"></span><a href="#">+</a>
                                             </p>
                                             <p id="p-line-style-line">
                                             <a href="#">-</a><span id="line-style-line"></span><a href="#">+</a>
                                             </p>
                                             <p id="p-line-style-blank">
                                             <a href="#">-</a><span id="line-style-blank"></span><a href="#">+</a>
                                             </p>
                          </div>
                          
                  </div>
          </div>
          <h3>Chart Background</h3>
          <div>
                  <h4>Type</h4>
                  <div>
                      <select id="bg-type">
                              <option>solid</option>
                              <option>gradient</option>
                              <option>stripes</option>
                      </select>
              </div>
              <h4>Angle</h4>
                          <div>
                      <p id="p-bg-angle">
                              <a href="#">-</a><span id="bg-angle"></span><a href="#">+</a>
                          </p>
                      </div>
              <h4>Stripe Width</h4>
                          <div>
                      <p id="p-bg-width">
                              <a href="#">-</a><span id="bg-width"></span><a href="#">+</a>
                          </p>
                      </div>
              <h4>Color</h4>
              <div>
                          <div id="f-bg-color"></div>
                  <p>
                  <label for="bg-color">Colors</label>
                  <input id="bg-color" name="bg-color" value="#FFFFFF" />
                  <input class="submit" type="submit" name="change" value="ok" />
                  </p>
                          </div>
                  <h4>Offset</h4>
                  <div>
                          <div id="f-bgo-color"></div>
                  <p>
                  <label for="bgo-color">Colors</label>
                  <input id="bgo-color" name="bgo-color" value="#FFFFFF" />
                  <input class="submit" type="submit" name="change" value="ok" />
                  </p>
                          </div>
                  <h4>Trasparency</h4>
                  <div>
                              <p>
                              <label for="bg-trasparency-active">Active : </label>
                              <input name="bg-trasparency-active" id="bg-trasparency-active" type="checkbox" />
                              </p>
                          <p id="p-bg-trasparency">
                          <a href="#">-</a><span id="bg-trasparency"></span><a href="#">+</a>
                              </p>
                  </div>
          </div>
          <h3>Chart Area Background</h3>
          <div>
                  <h4>Type</h4>
                  <div>
                      <select id="chbg-type">
                              <option>solid</option>
                              <option>gradient</option>
                              <option>stripes</option>
                      </select>
              </div>
              <h4>Angle</h4>
                          <div>
                      <p id="p-chbg-angle">
                              <a href="#">-</a><span id="chbg-angle"></span><a href="#">+</a>
                          </p>
                      </div>
              <h4>Stripe Width</h4>
                          <div>
                      <p id="p-chbg-width">
                              <a href="#">-</a><span id="chbg-width"></span><a href="#">+</a>
                          </p>
                      </div>
              <h4>Color</h4>
              <div>
                          <div id="f-chbg-color"></div>
                  <p>
                  <label for="chbg-color">Colors</label>
                  <input id="chbg-color" name="chbg-color" value="#FFFFFF" />
                  <input class="submit" type="submit" name="change" value="ok" />
                  </p>
                          </div>
                  <h4>Offset</h4>
                  <div>
                          <div id="f-chbgo-color"></div>
                  <p>
                  <label for="chbgo-color">Colors</label>
                  <input id="chbgo-color" name="chbgo-color" value="#FFFFFF" />
                  <input class="submit" type="submit" name="change" value="ok" />
                  </p>
                          </div>
                  <h4>Trasparency</h4>
                  <div>
                              <p>
                              <label for="chbg-trasparency-active">Active : </label>
                              <input name="chbg-trasparency-active" id="chbg-trasparency-active" type="checkbox" />
                              </p>
                          <p id="p-chbg-trasparency">
                          <a href="#">-</a><span id="chbg-trasparency"></span><a href="#">+</a>
                              </p>
                  </div>
          </div>
          <h3>Chart Grid</h3>
          <div>
                  <h4>Active</h4>
                  <p>
                              <input name="chbg-trasparency-active" id="grid-active" type="checkbox" />
                      </p>
                  <h4>X step</h4>
                  <p id="p-grid-x-step">
                          <a href="#">-</a><span id="grid-x-step"></span><a href="#">+</a>
                             </p>
                  <h4>Y step</h4>
                  <p id="p-grid-y-step">
                          <a href="#">-</a><span id="grid-y-step"></span><a href="#">+</a>
                             </p>
                  <h4>Lenght line segment</h4>
                  <p id="p-grid-line">
                          <a href="#">-</a><span id="grid-line"></span><a href="#">+</a>
                             </p>
                  <h4>Lenght blank segment</h4>
                  <p id="p-grid-blank">
                          <a href="#">-</a><span id="grid-blank"></span><a href="#">+</a>
                             </p>
          </div>
          <h3>Chart Series Colors</h3>
          <div>
                  <select id="colors-select"></select>
              <div id="f-series-color"></div>
                  <p>
                  <label for="series-color">Color</label>
                  <input id="series-color" name="series-color" value="#FFFFFF" />
                  <input class="submit" type="submit" name="change" value="ok" />
                  </p>
              </div>
          </div>
          
      </div>
      </form>
  </div>


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.