Post
Ask Question
Junaid Syed

Junaid Syed

  • NA
  • 485
  • 130.8k

How can i get data and append to highcharts in script

Sep 22 2017 2:13 AM
Hi iam appending the data to highchart static data and i want to get the data dynamically from database and how can we append to highchart in script.And how can i pass Table data to script to highchart.I have done something like this
  1.   
  2.     Name
    "text"     id="firstname" />

      
  3.     Project 1 billable Hours
    "text"     id="empid" />

      
  4.     Project 2 billable hours
    "text"     id="phnno" />

      
  5.     "button" id="btnSubmit">Submit
  6.   
  7.      "mytable"  border="1" class="tbinput" style="width:30%;border:1px">  
  8.           
  9.               
  10.                 Name  
  11.                 Project 1 billable hours  
  12.                 Project 2 billable hours      
  13.                 Mark  
  14.                 30  
  15.                 40  
  16.               
  17.               
  18.                 divide  
  19.                 20  
  20.                 10  
  21.               
  22.               
  23.                 jonhson  
  24.                 6  
  25.                 8  
  26.               
  27.               
  28.                 smith  
  29.                 70  
  30.                 90
  31.       
 This is my script
  1.   <script>
    function Hichartsfunction() {

    Highcharts.chart('container', {
    data: {
    table: 'mytable'
    },
    chart: {
    type: 'column'
    },
    title: {
    text: 'Hightchart Demo'
    },
    yAxis: {
    allowDecimals: false,
    title: {
    text: 'Units'
    }
    },
    tooltip: {
    formatter: function () {
    return '<b>' + this.series.name + '</b><br/>' +
    this.point.y + ' ' + this.point.name.toLowerCase();
    }
    },
    exportChart: {
    enabled: true
    }
    });
    }



    $(document).ready(function () {

    Hichartsfunction();

    $("#btnSubmit").click(function () {
    $("#mytable").append("<tr><td>" + $("#firstname").val() + "</td><td>" + $("#empid").val() + "</td><td>" + $("#phnno").val() + "</td></tr>");
    Hichartsfunction();
    });
    });

    </script>
 
My output something like the above picture When i entred data in 3 Textboxes data append into table and show highchart below so.I need to do same Data dynamically.Please help me by any idea ..Thank you