最后一步将MySQL连接到PHP到JSON到D3（javascript）很酷的东西multiharts

问题描述 投票：2回答：2

问题继续存在！这些聪明人都在哪里？ 链接下载吧！ example.zip（关于“advanced_8stremas，我拿了原版并放了一些类固醇，所以你可以更容易找到问题所在！） 现场演示：Advanced graph on steroids 现场演示：Advanced graph Original 现场演示：Simple graph takes values directly from mysql 所以答案在PINK盒子上传递！ XP

这是为高级图生成随机数据的代码！

function CAGARRO() { 
  var data1 = []; 
  var data2 = [];
  var data3 = []; 
  var data4 = [];
  var data5 = [];  
  var data6 = [];
  var data7 = [];
  var data8 = [];

// number 8 means 8lines, number 130 means create 130 x values, 
// .1 means the minimum Y value that the random code can give to all his numbers
stream_layers(8,130,.1).map(function(layer, PIXARADA) { 
      layer.forEach(function(TUTANCAMON, i) {
          var object = { x: TUTANCAMON.x };
          object['stream' + (PIXARADA + 1)] = TUTANCAMON.y;
          eval('data' + (PIXARADA + 1)).push(object);
      });
});


var dataA = extend(data1, data2);
var dataB = extend(data3, data4);
var dataC = extend(data5, data6);
var dataD = extend(data7, data8);

var dataY = extend(dataA, dataB);
var dataZ = extend(dataC, dataD);

var RESULTATS = extend(dataY, dataZ);


return RESULTATS;
}

This tutorial是惊人的，你无法想象将MySQL数据库连接到D3（javascript）图表是多么简单。 （15分钟实施）

唯一的“问题”是教程中的图表“太简单”了。只需一行！

然后我们就像这里的“非常酷的东西”：Live Demo of the CoolStuff Chart

在这里：Original Source CoolStuff Chart

当你快乐到达这一点时，你会发现以下不同之处： - 教程来源：

d3.json("php/data2.php", function(error, data) {
data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.close = +d.close;
});

本教程源代表从MySQL数据库接收的数据，如下所示：

[{"date":"1-May-12","close":"58.13"},{"date":"30-Apr-12","close":"53.98"},
{"date":"27-Apr-12","close":"67.00"},{"date":"26-Apr-12","close":"89.70"},
{"date":"25-Apr-12","close":"99.00"},{"date":"24-Apr-12","close":"130.28"},
{"date":"23-Apr-12","close":"166.70"},{"date":"20-Apr-12","close":"234.98"},
{"date":"19-Apr-12","close":"345.44"},{"date":"18-Apr-12","close":"443.34"},
{"date":"17-Apr-12","close":"543.70"},{"date":"16-Apr-12","close":"580.13"},
{"date":"13-Apr-12","close":"605.23"},{"date":"12-Apr-12","close":"622.77"},
{"date":"11-Apr-12","close":"626.20"},{"date":"10-Apr-12","close":"628.44"},
{"date":"9-Apr-12","close":"636.23"},{"date":"5-Apr-12","close":"633.68"},
{"date":"4-Apr-12","close":"624.31"},{"date":"3-Apr-12","close":"629.32"},
{"date":"2-Apr-12","close":"618.63"},{"date":"30-Mar-12","close":"599.55"},
{"date":"29-Mar-12","close":"609.86"},{"date":"28-Mar-12","close":"617.62"},
{"date":"27-Mar-12","close":"614.48"},{"date":"26-Mar-12","close":"606.98"}]

这个uggly数据在MySQL上看起来像这样：

无论如何，超级coolStuff图表是所有数据都是用一些奇怪的随机数循环创建的，这对我来说是一个地狱，试图将我从MySQL收到的数据插入到coolStuff代码中！

这里是“CoolStuff”循环的副本：

function testData() {
  var data1 = [];
  var data2 = [];
  var data3 = [];

  stream_layers(3,128,.1).map(function(layer, index) {
    layer.forEach(function(item, i) {
      var object = { x: item.x };
      object['stream' + (index + 1)] = item.y;
      eval('data' + (index + 1)).push(object);
    });
  });

有任何想法吗？

php mysql json charts d3.js
2个回答
1
投票

好的，所以我们有3个想法，直到知道。

1.“MySQL”数据库

有3个表calles“Date1”，“Date2”和“Date3”2个列各有数据： _________________________________________________________________________________ | |表：Data1 |表：Data2 |表：Data3 | _________________________________________________________________________________ | |日期|关闭|日期|关闭|日期|关闭| | _________________________________________________________________________________ | | 1 - 5月12 | 58.13 | 1 - 5月12 | 58.13 | 1 - 5月12 | 58.13 | | 30-APR-12 | 53.98 | 30-APR-12 | 53.98 | 30-APR-12 | 53.98 | | 27-APR-12 | 67.00 | 27-APR-12 | 67.00 | 27-APR-12 | 67.00 | | _________________________________________________________________________________ |

2.一个带有一些JSON数据的php文件/网桥

________________ _______________________ |表数据1 | - Data1.php - > |数据转换为JSON | ________________ _______________________ ________________ _______________________ |表数据2 | - Data2.php - > |数据转换为JSON | ________________ _______________________ ________________ _______________________ |表数据3 | - Data3.php - > |数据转换为JSON | ________________ _______________________

(Php complete Source here)从我们的表中选择数据

$myquery = "SELECT  `date`, `close` FROM  `data1`";<br>

然后我们将$data变量声明为数组（$data = array();）并将我们的查询返回的信息提供给$data数组;

for ($x = 0; $x < mysql_num_rows($query); $x++) {
    $data[] = mysql_fetch_assoc($query);
}

（这是一个花哨的小块代码，逐行获取信息并将其放入数组中）然后我们将jaz格式的echo数组（$data）返回（echo json_encode($data);）运行data2.php脚本

所以现在当我们输入“data1.php”，“data2.php”或“data3.php”时，我们会回复：

“data1.php”

[{"date":"1-May-12","close":"58.13"},{"date":"30-Apr-12","close":"53.98"},
{"date":"27-Apr-12","close":"67.00"},{"date":"26-Apr-12","close":"89.70"},

“data2.php”

[{"date":"1-May-12","close":"58.13"},{"date":"30-Apr-12","close":"53.98"},
{"date":"27-Apr-12","close":"67.00"},{"date":"26-Apr-12","close":"89.70"},

“data3.php”

[{"date":"1-May-12","close":"58.13"},{"date":"30-Apr-12","close":"53.98"},
{"date":"27-Apr-12","close":"67.00"},{"date":"26-Apr-12","close":"89.70"},

3. D3.js多图表，带有3个折线图。

Multichart demo，但这个multichart正在创建自我随机数据。使用此代码：

function testData() {
  var data1 = [];
  var data2 = [];
  var data3 = [];

  stream_layers(3,128,.1).map(function(layer, index) {
    layer.forEach(function(item, i) {
      var object = { x: item.x };
      object['stream' + (index + 1)] = item.y;
      eval('data' + (index + 1)).push(object);
    });
  });

  var data = extend(data1, data2);
  var result = extend(data, data3);

  return result;
}

因此我们在用户的“Xaranqe”建议下创建以下代码，将我们的“数据”插入此多重策略

function testData() {
    var data1 = [];
    var data2 = [];
    var data3 = [];

    d3.json("php/data1.php", function(error, data) {
        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.close = +d.close;
            data1.push(d.close);
        });
    d3.json("php/data2.php", function(error, data) {
        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.close = +d.close;
            data2.push(d.close);
        });
    d3.json("php/data3.php", function(error, data) {
        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.close = +d.close;
            data3.push(d.close);
        });
    // More similar functions here
    });

  var data = extend(data1, data2);
  var result = extend(data, data3);

  return result;
}

但是我们得到的结果是，一个BLANK页面..所以我们缺少一些东西.. mmmm ......

有什么新想法吗？

我给你留下了multihart代码的直接副本！感谢帮助！我相信社区将从这些信息中获益良多！

<!DOCTYPE html>
<meta charset="utf-8">
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">


<style>
body {
  overflow-y:scroll;
}
text {
  font: 12px sans-serif;
}
svg {
  display: block;
}
#chart1 svg {
  height: 500px;
  min-width: 100px;
  min-height: 100px;
/*
  margin: 50px;
  Minimum height and width is a good idea to prevent negative SVG dimensions...
  For example width should be =< margin.left + margin.right + 1,
  of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
*/
}
</style>


<body>
  <div id="chart">
    <svg style="height: 500px;"></svg>
  </div>
  <div id="stream1" style="float: left; margin-left: 15px;">
    <div><h1>Stream #1</h1></div>
  </div>
  <div id="stream2" style="float: left; margin-left: 15px;">
    <div><h1>Stream #2</h1></div>
  </div>
  <div id="stream3" style="float: left; margin-left: 15px;">
    <div><h1>Stream #3</h1></div>
  </div>


<script src="../lib/d3.v2.js"></script>
<script src="../lib/crossfilter.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/utils.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/scatter.js"></script>
<script src="../src/models/line.js"></script>
<script src="../src/models/lineWithFocusChart.js"></script>
<script src="stream_layers.js"></script>

<script>


extend = function(destination, source) {
    for (var property in source) {
    if (property in destination) { 
      if ( typeof source[property] === "object" &&
        typeof destination[property] === "object") {
          destination[property] = extend(destination[property], source[property]);
      } else {
        continue;
      }
    } else {
      destination[property] = source[property];
    };
    }
    return destination;
};
var rawData = testCrossfilterData();
nv.addGraph(function() {
  var chart = nv.models.lineWithFocusChart();
  chart.xAxis
      .tickFormat(d3.format(',f'));
  chart.x2Axis
      .tickFormat(d3.format(',f'));
  chart.yAxis
      .tickFormat(d3.format(',.2f'));
  chart.y2Axis
      .tickFormat(d3.format(',.2f'));
  chart.dispatch.on('brush', click);
  var data = normalizeData(rawData.datum, 
        [
        {
          name: 'Stream #1',
          key: 'stream1'
        },
        {
          name: 'Stream #2',
          key: 'stream2'
        },
        {
          name: 'Stream #3',
          key: 'stream3'
        }
        ]);
nv.log(data);
  d3.select('#chart svg')
      .datum(data)
    .transition().duration(500)
      .call(chart);
  nv.utils.windowResize(chart.update);
  return chart;
});


function click(e) {
  extent = e.extent;
  rawData.data.filter([extent[0], extent[1]]);
  streams("stream1");
  streams("stream2");
  streams("stream3");
}


function streams(key) {
  var topData = rawData.data.top(5);
  var stream = d3.select("div#" + key).selectAll(".stream-data")
      .data(topData, function(d) {
        return d.key;
      });
  stream
    .html(function(d) {
      return d[key];
    })
  stream.enter().append("div")
      .attr("class", "stream-data")
      .html(function(d) {
        return  d[key]; 
      })
  stream.exit().remove();
  stream.order();
}


function normalizeData(data, series) {
  var sort = crossfilter.quicksort.by(function(d) { return d.key; });
  var result = [];
  for (var i = 0; i < series.length; i++) {
    var seriesData = data.top(Infinity);
    var sorted = sort(seriesData, 0, seriesData.length);
    var values = [];

    seriesData.forEach(function(item, index) {
        values.push({x: item.key,  y: item.value[series[i].key]});
    });
    result.push({key: series[i].name, values: values, color: series[i].color});
  };
  return result;
};


function testCrossfilterData() {
  var data = crossfilter(testData());

  try {
    data.data = data.dimension(function(d) { return d.x; });
    data.datum = data.data.group(function(d) { return d; });
    data.datum.reduce(
      function (p, v) {
        p.count++;
        p.stream1 += v.stream1;
        p.stream2 += v.stream2;
        p.stream3 += v.stream3;
        return p;
      },
      function (p, v) {
        p.count--;
        p.stream1 -= v.stream1;
        p.stream2 -= v.stream2;
        p.stream3 -= v.stream3;
        return p;
      },
      function () {
        return {count: 0, stream1: 0, stream2: 0, stream3: 0};
      });

    data.stream1 = data.dimension(function(d) { return d.stream1; });
    data.stream1datum = data.data.group(function(d) { return d; });
    data.stream1datum.reduce(
      function (p, v) {
        p.count++;
        p.stream1 += v.stream1;
        p.stream2 += v.stream2;
        p.stream3 += v.stream3;
        return p;
      },
      function (p, v) {
        p.count--;
        p.stream1 -= v.stream1;
        p.stream2 -= v.stream2;
        p.stream3 -= v.stream3;
        return p;
      },
      function () {
        return {count: 0, stream1: 0, stream2: 0, stream3: 0};
      }
    );

    data.stream2 = data.dimension(function(d) { return d.stream2; });
    data.stream2datum = data.data.group(function(d) { return d; });
    data.stream2datum.reduce(
      function (p, v) {
        p.count++;
        p.stream1 += v.stream1;
        p.stream2 += v.stream2;
        p.stream3 += v.stream3;
        return p;
      },
      function (p, v) {
        p.count--;
        p.stream1 -= v.stream1;
        p.stream2 -= v.stream2;
        p.stream3 -= v.stream3;
        return p;
      },
      function () {
        return {count: 0, stream1: 0, stream2: 0, stream3: 0};
      }
    );

    data.stream3 = data.dimension(function(d) { return d.stream3; });
    data.stream3datum = data.data.group(function(d) { return d; });
    data.stream3datum.reduce(
      function (p, v) {
        p.count++;
        p.stream1 += v.stream1;
        p.stream2 += v.stream2;
        p.stream3 += v.stream3;
        return p; },
      function (p, v) {
        p.count--;
        p.stream1 -= v.stream1;
        p.stream2 -= v.stream2;
        p.stream3 -= v.stream3;
        return p;
      },
      function () {
        return {count: 0, stream1: 0, stream2: 0, stream3: 0};
      }
    );
  } catch (e) {
    nv.log(e.stack);
  }
  return data;
}


function testData() {
    var data1 = [];
    var data2 = [];
    var data3 = [];
    d3.json("php/data1.php", function(error, data) {
        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.close = +d.close;
            data1.push(d.close);
        });
    d3.json("php/data2.php", function(error, data) {
        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.close = +d.close;
            data2.push(d.close);
        });
    d3.json("php/data3.php", function(error, data) {
        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.close = +d.close;
            data3.push(d.close);
        });
    // More similar functions here
    });
  var data = extend(data1, data2);
  var result = extend(data, data3);
  return result;
}


</script>
</body>
</html>
0
投票

我不知道这是否会起作用，但这里有一些伪代码（希望）指向正确的方向：

function testData() {
    var data1 = [];
    var data2 = [];
    var data3 = [];

    d3.json("php/data1.php", function(error, data) {
        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.close = +d.close;
            data1.push(d.close);
        });

    // More similar functions here
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.