douxian9060
douxian9060
2015-04-30 21:50

根据<select>输入更改MySQL查询以更改Highcharts图

So I have 3 Bootstrap Panels on one site, each with a panel-header that contains a input and a panel-body that contains the Highcharts graph. The is dynamically filled with options from a database.

That's how a panel looks like:

<div class="panel panel-default">
<div class="panel-heading">
    <div class="container-fluid">
        <div class="col-sm-9"><h4>Graph 1</h4></div>
        <div class="col-sm-3">
            <select class="form-control">
                <?php include('get_options_from_database.php'); ?>
            </select>
        </div>      
    </div>
</div>
<div class="panel-body">
    <div id="highcharts-graph" style="width:100%; height:auto;"></div>
</div>

The get_options_from_database.php just uses a MySQL query to pull the relevant data from database and then a while loop to echo the options. Each option has a specific value (just simple integers). And based on the selected option I want to change the MySQL query that pulls the data for the Highcharts graph and redraw that. Note that the other two graphs should stay like they are unless the selected value of the select has changed. But how do I exactly do that.

So what I (think I) have to do:

  1. Read the value of the selected option of the
  2. Write the value into a variale and pass it over to the MySQL query (is in a separate file) which gets the data for the graph
  3. Redraw the graph with the new data but without redrawing the other two

I'm not sure if it's possible to do with out refreshing the page, but as long as only the graph changes where the has been changed I think I don't mind it. Another thing I'm unsure is if I would need a submit button that would trigger everything after selecting an option.

EDIT: Ok, now the next problem. The response from the xmlhttp object seems to be in the wrong format. When I open the Chrome developer tool and take a look at for example

getchart.php?option=1

It contains html tags:

<!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>

        [1420068600000,21.5],[1420070400000,19.2],[1420072200000,19],[1420074000000,22.6],[1420075800000,21.3],[1420077600000,21.5],[1420079400000,19.9],[1420081200000,22.3],[1420083000000,19]
<!-- And a lot more data -->
</body>
</html>

But I only need the data itself, like:

[1420068600000,21.5],[1420070400000,19.2],[1420072200000,19],[1420074000000,22.6],[1420075800000,21.3],[1420077600000,21.5],
and so on...

I have tried and just pasted a cut-out of the data into the javascript for the highchart graph and it works just fine. The graph even gets automatically redrawn if I change the selection (obviously the same data every time because it's static). So unless I'm doing something wrong I propably need a way to cut away those html tags and insert the result data: [ here ]

This is how it looks like when I pasted the cut-out in, which works fine.

<script type="text/javascript">
    function getData(nr)
    { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                $('#graphcontainer').highcharts('StockChart', {
                    chart: {
                        type : 'spline',
                        height: 650,
                        zoomType: 'x'
                    },

                    rangeSelector : {
                        selected : 1
                    },

                    title : {
                        text : ''
                    },

                    series : [{
                        name : 'Data',
//Here is where the data goes. This is basically how 
//it must look when the response comes back but the html tags 
//make it useless (I think)
                        data :  [ [1420068600000,21.5],[1420070400000,19.2],[1420072200000,19],[1420074000000,22.6],[1420075800000,21.3],[1420077600000,21.5],[1420079400000,19.9],[1420081200000,22.3],[1420083000000,19],[1420084800000,22],[1420086600000,18],[1420088400000,18.7],[1420090200000,20.9],[1420092000000,21.2],[1420093800000,20.3],[1420095600000,18.3],[1420097400000,19.5],[1420099200000,22.6],[1420101000000,21.4],[1420102800000,21.6],[1420104600000,18.5],[1420106400000,20.8],[1420108200000,23],[1420110000000,23],[1420111800000,18.7],[1420113600000,20.4],[1420115400000,18.5],[1420117200000,19.6],[1420119000000,21.3],[1420120800000,18.6],[1420122600000,20.9],[1420124400000,18.5],[1420126200000,21.4],[1420128000000,20.8],[1420129800000,22.2],[1420131600000,19.4],[1420133400000,22.4],[1420135200000,19.4],[1420137000000,18],[1420138800000,20.9],[1420140600000,21.4],[1420142400000,18.9],[1420144200000,22.6],[1420146000000,19.4],[1420147800000,19.6],[1420149600000,21.5],[1420151400000,19.2],[1420153200000,21.6],[1420155000000,18.2], ] ,
                        tooltip: {
                            valueDecimals: 2
                        }
                    }]
                });
            }
        }
        xmlhttp.open("POST","getchart.php?option="+nr,true);
        xmlhttp.send();
    }
</script>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • dongyong3590 dongyong3590 6年前

    Triggering when the user changes the options should be fairly simple:

    option.addEventListener('change', function(){ ... });
    

    Redrawing the chart without refreshing the page can be done with an XMLHTTPRequest object like so:

    var request = new XMLHTTPRequest();
    
    request.onreadystatechange = function(){ ## do something when response comes back};
    request.open("get", "example.com/getchart?option=1", true);
    request.send();
    

    Once the XMLHTTPRequest comes back with an answer:

    if(request.readystate === 4){ document.getElementById('chart').innerHTML = request.responseText };
    

    (Place something along those lines inside the 'onreadystatechange'). This is of course assuming that the response it gets back is formatted in HTML, just like what you are doing with 'get_options_from_database.php'.

    For more info on Ajax(XMLHTTPRequest) you can look here: http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp

    点赞 评论 复制链接分享

为你推荐