hello
i am a newbie at this and would appreciate a little help here
is it possible to make pie ang bar chart from chosen columns in my example where i add data to my table by saving form results so the data is added and updated dynamically?
thanks a lot
Mile
code:
<!DOCTYPE html>
<html>
<head>
<!-- Meta Tags -->
<meta charset="utf-8">
<script src="scripts/jquery.js"></script>
<!--[if lt IE 10]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<header id="header" class="info">
</header>
</head>
<body id="thebody">
<div id="enterdata" class="ltr">
<form id="animals-form" name="animals-form" class="page" autocomplete="off" enctype="multipart/form-data" method="post">
<li id="animal_id" class="notranslate ">
<label class="desc " id="animal_id" for="Field3">
Animal ID
<span id="animal_id" class="req">*</span>
</label>
<div>
<input id="animal_id" name="Field3" type="text" class="field text nospin medium" value="" tabindex="1" onkeyup="" required />
</div>
</li><li id="animal_name" class="notranslate ">
<label class="desc" id="animal_name" for="Field1">
Animal name
<span id="req_1" class="req">*</span>
</label>
<div>
<input id="animal_name" name="Field1" type="text" class="field text medium" value="" maxlength="255" tabindex="2" onkeyup="" required />
</div>
</li><li id="animal_type" class="notranslate ">
<label class="desc" id="animal_type" for="Field4">
Animal type
<span id="animal_type" class="req">*</span>
</label>
<div>
<select id="animal_type" name="Field4" class="field select medium" tabindex="3" >
<option value="" selected="selected">
</option>
<option value="Calf" >
Calf
</option>
<option value="Heifer" >
Heifer
</option>
<option value="Cow" >
Cow
</option>
<option value="Bull" >
Bull
</option>
</select>
</div>
</li>
<li id="ansex" class="notranslate ">
Animal sex
<span id="aasex" class="req">*</span>
<div>
<input type="radio" name="gender" onclick="displayResult(this.value)" value="Male">Male<br />
<input type="radio" name="gender" onclick="displayResult(this.value)" value="Female">Female<br />
<input type="hidden" id="animal_sex" />
</li>
<li id="bday" class="date notranslate ">
<label class="desc" id="bday" for="bday">
Birth date
</label><div>
<input id="bday" name="bday" type="date"/>
</div></li>
<li id="mother_name" class="notranslate ">
<label class="desc" id="mother_name" for="Field106">
Mother`s name
</label>
<div>
<input id="mother_name" name="Field106" type="text" class="field text medium" value="" maxlength="255" tabindex="9" onkeyup="" />
</div>
</li><li id="farm_name" class="notranslate ">
<label class="desc" id="farm_name" for="Field107">
Farm`s name
</label>
<div>
<input id="farm_name" name="Field107" type="text" class="field text medium" value="" maxlength="255" tabindex="10" onkeyup="" />
</div>
</li><li id="money" class="notranslate ">
<label class="desc" id="money" for="Field108">
Purchase price
</label>
<div>
<input id="money" type="number" name="money" min="0" max="9999" step="0.01" size="4" value="" size="10" tabindex="11" required />
<span class="symbol">€</span>
</div>
</li><li id="weight" class="notranslate ">
<label class="desc " id="weight" for="Field109">
Weight
</label>
<div>
<input type="number" id="weight" name="weight" min="0" max="9999" step="0.01" size="4" value="" tabindex="13" onkeyup="" />
<span class="symbol">Kg</span>
</div>
</li><li id="purchase_partner" class="notranslate ">
<label class="desc" id="purchase_partner" for="Field110">
Purchase partner
<span id="purchase_partner" class="req">*</span>
</label>
<div>
<select id="purchase_partner" name="Field110" class="field select medium" tabindex="14" >
<option value="" selected="selected">
</option>
<option value="Purchase partner 1" >
Purchase partner 1
</option>
<option value="Purchase partner 2" >
Purchase partner 2
</option>
<option value="Purchase partner 3" >
Purchase partner 3
</option>
<option value="Purchase partner 4" >
Purchase partner 4
</option>
<option value="Purchase partner 5" >
Purchase partner 5
</option>
</select>
</div>
</li><div class="button-wrapper">
<div class="item button button-default">
<div class="field"><input type="submit" id="animals-save" value="Save animal"/></div>
</div>
<div class="item button">
<div class="field"><input type="button" id="animals-discard" value="Clear" align="right"/></div>
</div>
</div>
<input type="hidden" name="id_entry" value="0" />
</div></form>
<div id="table">
<table id="animals-table" border="1">
<thead id="animals-head" >
<tr> <th>No.</th>
<th>Animal ID</th>
<th>Animal Name</th>
<th>Animal Type</th>
<th>Birth Date</th>
<th>Animal Sex</th>
<th>Mother`s Name</th>
<th>Farm`s Name</th>
<th>Price €</th>
<th>Weight Kg</th>
<th>Partner</th>
<th>Edit/Del</th>
</tr>
</thead>
</div>
</table>
</body>
<div id="pageNavPosition"></div>
</html>
<style>
html{
margin-left: 150px;
background-color: #CCFF99;
}
#animals-head {
background-color: #33FF00;}
#animals-table {
border-right: solid 1px black;
padding: 10px;
overflow: auto;
}
tr {
padding: 2px 5px;
font-size: 14px;
}
body {
width: 1000px;
background-color: #CCCCCC;
margin: 0;
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
padding: 2px;
}
h2{
alignment-adjust: middle;
margin-top:100px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div#enterdata{
margin-top:25px;
width:225px;
float: left;
margin-left:10px;
display: inline-block;
}
header#header {
background-image: url(../forma/images/page_t.jpg);
padding: 2px;
width:100%;
height:99px;
border-bottom: solid 1px #9E9E9E; }
div#table{
margin-top:25px;
margin-right:10px;
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
width:750px;
float: right;
}
</style>
<script>
var table = document.getElementById('animals-table');
new Tablesort(table);
function displayResult(gender)
{
document.getElementById("animal_sex").value=gender;
}
var Animals ={
index: window.localStorage.getItem("Animals:index"),
$table: document.getElementById("animals-table"),
$form: document.getElementById("animals-form"),
$button_save: document.getElementById("animals-save"),
$button_discard: document.getElementById("animals-discard"),
init: function() {
if (!Animals.index) {
window.localStorage.setItem("Animals:index", Animals.index = 1);
}
Animals.$form.reset();
Animals.$button_discard.addEventListener("click", function(event) {
Animals.$form.reset();
Animals.$form.id_entry.value = 0;
}, true);
Animals.$form.addEventListener("submit", function(event) {
var entry = {
id: parseInt(this.id_entry.value,radix),
animal_id:this.animal_id.value,
animal_name: this.animal_name.value,
animal_type: this.animal_type.value,
bday: this.bday.value,
animal_sex: this.animal_sex.value,
mother_name: this.mother_name.value,
farm_name: this.farm_name.value,
money: this.money.value,
weight: this.weight.value,
purchase_partner: this.purchase_partner.value
};
if (entry.id === 0) {
Animals.storeAdd(entry);
Animals.tableAdd(entry);
}
else { // edit
Animals.storeEdit(entry);
Animals.tableEdit(entry);
}
this.reset();
this.id_entry.value = 0;
event.preventDefault();
}, true);
if (window.localStorage.length - 1) {
var animals_list = [], i, key;
for (i = 0; i < window.localStorage.length; i++) {
key = window.localStorage.key(i);
if (/Animals:\d+/.test(key)) {
animals_list.push(JSON.parse(window.localStorage.getItem(key)));
}
}
if (animals_list.length) {
animals_list.sort(function(a, b)
{return a.id < b.id ? -1 : (a.id > b.id ? 1 : 0);})
.forEach(Animals.tableAdd);}
}
Animals.$table.addEventListener("click", function(event) {
var op = event.target.getAttribute("data-op");
if (/edit|remove/.test(op)) {
var entry = JSON.parse(window.localStorage.getItem("Animals:"+ event.target.getAttribute("data-id")));
if (op == "edit") {
Animals.$form.id_entry.value = entry.id;
Animals.$form.animal_id.value = entry.animal_id;
Animals.$form.animal_name.value = entry.animal_name;
Animals.$form.animal_type.value = entry.animal_type;
Animals.$form.bday.value = entry.bday;
Animals.$form.animal_sex.value = entry.animal_sex;
Animals.$form.mother_name.value = entry.mother_name;
Animals.$form.farm_name.value = entry.farm_name;
Animals.$form.money.value = entry.money;
Animals.$form.weight.value = entry.weight;
Animals.$form.purchase_partner.value = entry.purchase_partner;
}
else if (op == "remove") {
if (confirm('Are you sure you want to remove this animal from your list?' )) {
Animals.storeRemove(entry);
Animals.tableRemove(entry);
}
}
event.preventDefault();
}
}, true);
},
storeAdd: function(entry) {
entry.id = Animals.index;
window.localStorage.setItem("Animals:index", ++Animals.index);
window.localStorage.setItem("Animals:"+ entry.id, JSON.stringify(entry));
},
storeEdit: function(entry) {
window.localStorage.setItem("Animals:"+ entry.id, JSON.stringify(entry));
},
storeRemove: function(entry) {
window.localStorage.removeItem("Animals:"+ entry.id);
},
tableAdd: function(entry) {
var $tr = document.createElement("tr"), $td, key;
for (key in entry) {
if (entry.hasOwnProperty(key)) {
$td = document.createElement("td");
$td.appendChild(document.createTextNode(entry[key]));
$tr.appendChild($td);
}
}
$td = document.createElement("td");
$td.innerHTML = '<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';
$tr.appendChild($td);
$tr.setAttribute("id", "entry-"+ entry.id);
Animals.$table.appendChild($tr);
},
tableEdit: function(entry) {
var $tr = document.getElementById("entry-"+ entry.id), $td, key;
$tr.innerHTML = "";
for (key in entry) {
if (entry.hasOwnProperty(key)) {
$td = document.createElement("td");
$td.appendChild(document.createTextNode(entry[key]));
$tr.appendChild($td);
}
}
$td = document.createElement("td");
$td.innerHTML = '<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';
$tr.appendChild($td);
},
tableRemove: function(entry) {
Animals.$table.removeChild(document.getElementById("entry-"+ entry.id));
}
};
Animals.init();
</script>
Before you post, read our: 
