get form data by click and chart with the data in bar chart - Javascript highcharts

Javascript examples for highcharts:Bar Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Bar Chart

Description

get form data by click and chart with the data in bar chart

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://code.jquery.com/jquery-1.8.3.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){/* w  ww.jav a  2  s .  co m*/
var chart = null;
$(function() {
    $("#btnGet").on('click', function(evt) {
        evt.preventDefault();
        var city1 = $("#city1").val();
        var city2 = $("#city2").val();
        var dataString = {
            city1: city1,
            city2: city2
        };
        requestData(dataString);
    });
    function requestData(dataString) {
        var chartSeriesData = [];
        var chartCategory = [];
        var point = [{
            "name": dataString.city1,
            "data2": [70, 19]},
        {
            "name": dataString.city2,
            "data2": [60, 18]}];
        $.each(point, function(i, item) {
            var series_name = item.name;
            var series_data = item.data2;
            var cagory = series_name;
            var series = {
                name: series_name,
                data: item.data2
            };
            chartSeriesData.push(series);
            chartCategory.push(series_name);
        });
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'column'
            },
            title: {
                text: 'Real time data from database'
            },
            xAxis: {
                categories: chartCategory
            },
            yAxis: {
                minPadding: 0.1,
                maxPadding: 0.1,
                title: {
                    text: 'Value',
                    margin: 40
                }
            },
            series: chartSeriesData
        });
    }
});
    });

      </script> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://code.highcharts.com/stock/highstock.src.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/stock/modules/exporting.src.js"></script> 
      <div id="container" style="min-width: 200px; height: 400px; margin: 0 auto"></div> 
      <div id="city_form"> 
         <form name="contact" action="" method="post"> 
            <label for="city1" id="city1_label">First city</label> 
            <input type="text" name="city1" id="city1" size="30" value="Amsterdam"> 
            <label for="city2" id="email_label">Second city</label> 
            <input type="text" name="city2" id="city2" size="30" value="London"> 
            <button id="btnGet">Click me</button> 
         </form> 
      </div>  
   </body>
</html>

Related Tutorials