2016-11-17 11 views
0

データベースからデータを取得する複数の系列でライン線図を作成しようとしています。データベースからデータを取得する複数系列の線グラフを作成する

これは私が持っているテーブルです:だから

Code | Date/Time 

----------------------- 

A | 9-10-2016 09:25 

B | 10-11-2016 10:11 

C | 11-10-2016 14:23 

A | 9-10-2016 10:10 

B | 10-11-2016 11:00 

、私はチャート内の各「コード」の発生回数の合計を表示する必要があります。上記の表では、コード "A"の2回、コード "B"の2回、コード "C"の1回の出現があります。

フロートチャットの作成に問題はありませんが、フロチャートで時系列の変数に適切なデータを取得できません。

したがって、MySQLとPHPを使用してデータベースからデータを抽出する方法は?以下は

は、私は1つのラインシリーズを持っているFLOTチャートのコードであり、私は、データベース内で使用可能なすべてのシリーズを追加する必要があり、それは10かもしれないか、それが100

私はVAR D1を持っている可能性があり、

<script type="text/javascript"> 

$(ドキュメント).ready(関数(){

var d1 = [<?php print_r($js_array1); ?>]; 

var data = [{label: "<?php echo $error_code; ?>" , data: d1, lines: { show: true, fill: false }, points: { show: true }, color: "#478514" } 
]; 

var p = $.plot($("#placeholder"), data, { 
     xaxis: { 
    ticks: 8, 
    mode: 'time' 
}, 
yaxis: { 
    ticks: 6, 
    min: 0 
}, 
grid: { 
    backgroundColor: { colors: ['#fff', '#eee'] }, 
    hoverable: true 
}, 
legend: { 
    labelFormatter: function(label, series) { 
    return '<a href="$chart_label_link">' + label + '</a>'; 
    } 
     } 
}); 

$.each(p.getData()[0].data, function(i, el){ 
    var o = p.pointOffset({x: el[0], y: el[1]}); 
    $('<div class="data-point-label">' + el[1] + '</div>').css({ 
     position: 'absolute', 
     left: o.left -10, 
     top: o.top -20, 
     display: 'none', 
     'font-size': '13px' 
    }).appendTo(p.getPlaceholder()).fadeIn('slow'); 
}); 

function showTooltip(x, y, contents, z) { 
    $('<div id="flot-tooltip">' + contents + '</div>').css({ 
     position: 'absolute', 
     display: 'none', 
     top: y - 30, 
     left: x + 30, 
     border: '2px solid', 
     padding: '2px', 
     'background-color': '#FFF', 
     opacity: 0.80, 
     'font-size': '10px', 
     'border-color': z, 
     '-moz-border-radius': '5px', 
     '-webkit-border-radius': '5px', 
     '-khtml-border-radius': '5px', 
     'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif', 
     'border-radius': '5px' 
    }).appendTo("body").fadeIn(200); 
} 

function getMonthName(numericMonth) { 
    var monthArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; 
    var alphaMonth = monthArray[numericMonth]; 

    return alphaMonth; 
} 

function convertToDate(timestamp) { 
    var newDate = new Date(timestamp); 
    var dateString = newDate.getMonth(); 
    var monthName = getMonthName(dateString); 

    return monthName; 
} 

var previousPoint = null; 
var previousPointLabel = null; 

$("#placeholder").bind("plothover", function (event, pos, item) { 
    if (item) { 
     if ((previousPoint != item.dataIndex) || (previousLabel != item.series.label)) { 
      previousPoint = item.dataIndex; 
      previousLabel = item.series.label; 

      $("#flot-tooltip").remove(); 

      var x = convertToDate(item.datapoint[0]); 
      y = item.datapoint[1]; 
      z = item.series.color; 

      showTooltip(item.pageX, item.pageY, 
        "<b>" + item.series.label + "</b><br />" + y + " transactions impacted.", 
        z); 
     } 
    } else { 
     $("#flot-tooltip").remove(); 
     previousPoint = null; 
    } 
    }); 
}); 

..... D2、D3、D4を追加する必要があります

私はあなたの助けを感謝します...ありがとう!

答えて

0

データベースからデータを取得するには、ポストまたはゲットメソッドを使用する必要があります。通常、これはjson配列を取得し、オブジェクトに変換したり、作成可能な一連の変数に割り当てる必要があります受け取ったデータを保持するために必要に応じて

PHP経由でmysqlデータベースとやり取りする際の基本については、http://www.w3schools.com/tags/ref_httpmethods.asphttp://www.w3schools.com/php/php_mysql_intro.aspをお勧めします。希望が助けてくれる!