topical media & game development
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.