sql >> Database teknologi >  >> RDS >> Mysql

Highchart- Brug af PHP, MYSQL og jQuery.get til at parse data

Okay, her er en komplet løsning:

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

<div id="container" style="height: 400px; width: 900px"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://www.highcharts.com/js/highcharts.src.js"></script>
<script>
jQuery(function($) {
    var options = {
        chart: {renderTo: 'container', defaultSeriesType:'spline', height: 400},
        title: {text: 'SEN-2 Bulkhead Isolation'},
        xAxis: {title: {text: 'Frequency Hz'}, type: 'logarithmic'},
        yAxis: {title: {text: 'Isolation dB'}, plotLines: [{ value: 0, width: 1, color: '#808080'}]},
        tooltip: {
            formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+'('+this.x +' : '+ this.y +')';
            }
        },
        legend: {layout: 'vertical', align: 'right', verticalAlign: 'top', x: 40, y: 100, borderWidth: 0, width: 300 },
        series: []
    };

    jQuery.get('data2.php', null, function(tsv) {
        var data = {};
        tsv = tsv.split(/\n/g); // split into rows
        for (var row=0, rows=tsv.length; row<rows; row++) {
            var line = tsv[row].split(/\t/g), // split into columns
                series_name = line[0],
                x = Number(line[1]),
                y = Number(line[2]);
            if (!data[series_name]) data[series_name] = [];
            data[series_name].push([x,y]);
        }
        for (var series_name in data) {
            options.series.push({
                name: series_name,
                data: data[series_name]
            });
        }
        new Highcharts.Chart(options);
    });

});
</script>
</body></html>

Jeg testede det med disse TSV-data:

SSTP Keystone STEEL 0.6 74.9 
SSTP Keystone STEEL 0.895   81.74
SSTP Keystone STEEL 1.336   77.26
SSTP Keystone STEEL 1.993   76.81
SSTP Keystone STEEL 2.974   80.45 
SSTP Keystone STEEL 4.438   69.41
SSTP Keystone STEEL 6.622   61.37
SSTP Keystone STEEL 9.881   79.07
SSTP Keystone STEEL 14.744  79.75
SSTP Keystone STEEL 20.000  72.33

Det, jeg gør, er at gå gennem TSV'en og bygge data variabel som et associativt array indtastet på serienavnet, sådan her:

{
    'SSTP Keystone STEEL': [[0.6,74.9],[0.895,81.74],...],
    ...
}

Så gennemgår jeg data variabel og konstruerer options.series i det format, som HighCharts forventer - en række objekter med et name egenskab og en data ejendom.




  1. Lagring af kreditkortnumre i SESSION - måder omkring det?

  2. MySQL-valgte poster for 1 time siden eller nyere i kolonnen dato og klokkeslæt

  3. indsæt autoincrement i anden kolonne

  4. Betinget lead/lag funktion PostgreSQL?