Ok, so we have 3 thinks until know.
1. A "MySQL" database
with 3 tables calles "Date1", "Date2" and "Date3" With 2columns each with data :
_________________________________________________________________________________|
| Table: Data1 | Table: Data2 | Table: Data3 |
_________________________________________________________________________________|
| Date | Close | Date | Close | Date | Close |
|_________________________________________________________________________________|
| 1-May-12 | 58.13 | 1-May-12 | 58.13 | 1-May-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. A php file/bridge with some JSON data back
________________ _______________________
| Table Data1 | - Data1.php - > | Data translated to JSON |
________________ _______________________
________________ _______________________
| Table Data2 | - Data2.php - > | Data translated to JSON |
________________ _______________________
________________ _______________________
| Table Data3 | - Data3.php - > | Data translated to JSON |
________________ _______________________
(Php complete Source here) that selects the data from our table
$myquery = "SELECT `date`, `close` FROM `data1`";<br>
Then we declare the $data variable as an array ($data = array();) and feed the returned information from our query into $data array;
for ($x = 0; $x < mysql_num_rows($query); $x++) {
$data[] = mysql_fetch_assoc($query);
}
(that's a fancy little piece of code that gets the information row by row and puts it into the array)
We then return (echo) the $data array in json format (echo json_encode($data);) into whatever ran the data2.php script
So now when we type "data1.php", "data2.php" or "data3.php" we get back this:
"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. The D3.js multichart with 3 linecharts.
Multichart demo but this multichart is creating it self random data. With this code:
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;
}
So we create under the user's "Xaranqe" advice the following code to plug in our "Data" to this multichart
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;
}
But the result we get back is, a BLANK page.. So there is something there we are missing.. mmmm...
Any new ideas?
I leave you with a direct copy of the multichart code! Thanks for help!
Am sure the community will benefit a lot from this info!
<!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>
