Google line charts with math function - Javascript Google Chart

Javascript examples for Google Chart:Line Chart

  1. HOME
  2. Javascript
  3. Google Chart
  4. Line Chart

Description

Google line charts with math function

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from  w  w  w  . j  a va2  s .  c o m
google.charts.load('current', {
  'packages': ['line']
});
google.charts.setOnLoadCallback(UpdateValues);
UpdateValues();
document.getElementById("k").addEventListener("change", function() {
  UpdateValues();
});
document.getElementById("lambda").addEventListener("change", function() {
  UpdateValues();
});
var weight = [
  [0, 0]
];
function UpdateValues() {
  weight = [];
  var k = document.getElementById("k").value;
  var lambda = document.getElementById("lambda").value;
  for (var x = 0.1; x < 20; x += 0.1) {
    weight.push([x, k * Math.pow(x / lambda, k - 1) * Math.exp(-Math.pow(x / lambda, k)) / lambda]);
    document.getElementById("message").innerHTML = weight;
  }
  drawChart();
}
function drawChart() {
  if (!google.visualization) {
    return;
  }
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'weight');
  data.addRows(weight);
  var chart = new google.charts.Line(document.getElementById('chart_weights'));
  var options = {
    height: 288,
    width: 550,
    lineWidth: 1
  };
  chart.draw(data, options);
}
    }

      </script> 
   </head> 
   <body> 
      <table> 
         <tbody>
            <tr> 
               <td>k: </td> 
               <td> 
                  <input id="k" type="number" value="2.2" min="0" max="10" step="0.1"> 
               </td> 
            </tr> 
            <tr> 
               <td>lambda: </td> 
               <td> 
                  <input id="lambda" type="number" value="7.6" min="0" max="10" step="0.1"> 
               </td> 
            </tr> 
         </tbody>
      </table> 
      <p id="message"> </p> 
      <div id="chart_weights"></div>  
   </body>
</html>

Related Tutorials