CODEWITHSUNDEEP
javascriptphpdatabase
user
user

Reputation: 23

How to create a line chart with database values?

I have a database to save some value which is gerilim, akim and power.

I want to make a line chart with these values from database. I search on the internet and couldn't find anything. Here is my script code;

* 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 */

Upvotes: 0

Views: 118

Answers (1)

Roni Hacohen
Roni Hacohen

Reputation: 403

The best way is to build a REST API with php that will serve a JSON that will contain all the values, then you can Get that JSON with AJAX from the client-side (JavaScript) and use a great visualization lib like D3.

Upvotes: 1

Related Questions