javascript - Highcharts: Show data dynamically based on form input


I want show data with highcharts onindex.php page.

How should I do?, this is what I tried so far:

I have a HTML page:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src=""></script>
<script type="text/javascript">
  $(document).ready(function() {
    var options = {
      chart: {
        renderTo: 'container',
        type: 'line',
        marginRight: 130,
        marginBottom: 25
      title: {
        text: 'San luong Card',
        x: -20 //center
      subtitle: {
        text: '',
        x: -20
      xAxis: {
        categories: []
      yAxis: {
        title: {
          text: 'Tong tien'
        plotLines: [{
          value: 0,
          width: 1,
          color: '#red'
      tooltip: {
        formatter: function() {
            return '<b>'+ +'</b><br/>'+
            this.x +': '+ this.y;
      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -10,
        y: 100,
        borderWidth: 0
      plotOptions: {
        area: {
          stacking: 'high',
          lineColor: '#666666',
          lineWidth: 1,
          marker: {
            lineWidth: 1,
            lineColor: '#666666'
      series: []

      $.getJSON("data.php", function(json) {
      options.xAxis.categories = json[0]['data'];
      options.series[0] = json[1];
      var chart = new Highcharts.Chart(options);
      return false;

<script src=""></script>
<script src=""></script>
  <form method="post" action="data.php" id="form_search">
    <header><h3>Thong ke CCU</h3></header>
    <div >
          <label>Tu ngay</label>
          <input type="text" name="t_n" />
          <label>Den ngay</label>
          <input type="text" name="d_n" />
        <div ></div>
    <div >
      <input type="submit" name="s_t" value="Search" id="submit" >
      <input type="reset" name="reset" value="Refesh" >

        <div id="container" ></div>

When I submit form with value 2 textfield data show ondata.php with JSON data type.


    $date = new DateTime();
        $t_n = strtotime($_POST['t_n']);
        $d_n = strtotime($_POST['d_n']);
        $tn = date("Y-m-d",$t_n);
        $dn = date("Y-m-d",$d_n);
        $query = mysql_query("select SUM(ccu) as sumccu,DATE_FORMAT(date,'%d-%m') as day from skycity_log.ccu_log where date >='".$tn."' AND date <='".$dn."' GROUP BY date") or (mysql_error());

        $category = array();
        $category['name'] = 'DAY';

        $series1 = array();
        $series1['name'] = 'CCU';

        while($r = mysql_fetch_array($query)) {
            echo $r['day'];
            $category['data'][] = $r['day'];
            $series1['data'][] = $r['sumccu'];     

    $result = array();

    print json_encode($result, JSON_NUMERIC_CHECK);



The missing parts are:

  • Intercept the form submission (e.g by defining an obsubmit handler using jquery.submit)
  • Manually fetch JSON data from the server (e.g. using
  • Convert received data to Highcharts series format, if neccesary
  • Initialize Highcharts using the received data (the code currently in your document.ready handler)

People are also looking for solutions to the problem: javascript - Like system with Codeigniter and AJAX


Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.