如何使用数据库值创建折线图?

时间:2016-10-31 13:13:05

标签: javascript php database

我有一个数据库来保存一些值,这是gerilim,akim和power。

我想用数据库中的这些值制作折线图。我在互联网上搜索,找不到任何东西。这是我的脚本代码;

* LINE CHART
 * ----------
 */
//LINE randomly generated data

var data = [],id=0;
<?php 
include"../../pages/veri_ayar.php";

$verileriCek = mysql_query("SELECT * FROM etkin");

            while ($b=mysql_fetch_array($verileriCek)){

                $akim = $b['akim'];
        $id=$b['id'];

            }
   data=$akim;
   id=$id;?>


var i=0;
    while(i < id ) {
      data;
      i++;
    }
    var line_data1 = {
      data: data,
      color: "#3c8dbc"
    };
    $.plot("#line-chart", [line_data1], {
      grid: {
        hoverable: true,
        borderColor: "#f3f3f3",
        borderWidth: 1,
        tickColor: "#f3f3f3"
      },
      series: {
        shadowSize: 0,
        lines: {
          show: true
    },
    points: {
      show: true
    }
  },
  lines: {
    fill: false,
    color: ["#3c8dbc"]
  },
  yaxis: {
    show: true,
  },
  xaxis: {
    show: true
  }
});
//Initialize tooltip on hover
$('<div class="tooltip-inner" id="line-chart-tooltip"></div>').css({
  position: "absolute",
  display: "none",
  opacity: 0.8
}).appendTo("body");
$("#line-chart").bind("plothover", function (event, pos, item) {

  if (item) {
    var x = item.datapoint[0].toFixed(2),
        y = item.datapoint[1].toFixed(2);

    $("#line-chart-tooltip").html(item.series.label + " of " + x + " = " + y)
        .css({top: item.pageY + 5, left: item.pageX + 5})
        .fadeIn(200);
  } else {
    $("#line-chart-tooltip").hide();
  }

});
/* END LINE CHART */

1 个答案:

答案 0 :(得分:1)

最好的方法是使用php构建一个REST API,它将提供包含所有值的JSON,然后您可以从客户端(JavaScript)使用AJAX获取该JSON,并使用像{一样的可视化库。 {3}}