Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    make charts from dynamic table columns

    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>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,721
    Thanks
    25
    Thanked 662 Times in 661 Posts
    I googled "make pie chart js" and "make pie chart jquery" and got billions and billions of sites.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •