return flot charts with row details
return flot charts with row details
david_lyon
Posts: 8Questions: 0Answers: 0
https://datatables.net/release-datatables/examples/server_side/row_details.html
When a user clicks on the row details how do I return plots drawn with flot. Example flot code is shown below.
Can some show me how to insert flot plots into the row details using the flot example below?
Many thanks for your consideration.
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Flot Examples
<!--[if lte IE 8]><![endif]-->
Flot Examples
Show:
$(function () {
var datasetsB = {
"usa": {
label: "USA",
data: [[1988, 483994], [1998, 83994]]
},
"russia": {
label: "Russia",
data: [[1988, 218000], [1998, 28000]]
},
"uk": {
label: "UK",
data: [[1988, 62982], [1388, 62982]]
}
};
var datasetsA = {
"usa": { label: "USA",
data: [[1998, 483994]]
},
"russia": {
label: "Russia",
data: [[1988, 218000]]
},
"uk": {
label: "UK",
data: [[1988, 629822]]
}
};
// hard-code color indices to prevent them from shifting as
// countries are turned on/off
var i = 0;
$.each(datasetsA, function(key, val) {
val.color = i;
++i;
});
// insert checkboxes
var choiceContainer = $("#choices");
$.each(datasetsB, function(key, val) {
choiceContainer.append('
' +
''
+ val.label + '');
});
choiceContainer.find("input").click(plotAccordingToChoices);
choiceContainer.find("input").click(plotAccordingToChoices2);
function plotAccordingToChoices() {
var data = [];
choiceContainer.find("input:checked").each(function () {
var key = $(this).attr("name");
if (key && datasetsA[key])
data.push(datasetsA[key]);
});
if (data.length > 0)
$.plot($("#placeholder"), data, {
yaxis: { min: 0 },
grid: { hoverable: true, clickable: true },
points: { show: true },
xaxis: { tickDecimals: 0 }
});
}
plotAccordingToChoices();
plotAccordingToChoices2();
function plotAccordingToChoices2() {
var data = [];
choiceContainer.find("input:checked").each(function () {
var key = $(this).attr("name");
if (key && datasetsB[key])
data.push(datasetsB[key]);
});
if (data.length > 0)
$.plot($("#placeholder2"), data, {
yaxis: { min: 0 },
grid: { hoverable: true, clickable: true },
points: { show: true },
lines: { show: true },
xaxis: { tickDecimals: 0 }
});
}
});
[/code]
When a user clicks on the row details how do I return plots drawn with flot. Example flot code is shown below.
Can some show me how to insert flot plots into the row details using the flot example below?
Many thanks for your consideration.
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Flot Examples
<!--[if lte IE 8]><![endif]-->
Flot Examples
Show:
$(function () {
var datasetsB = {
"usa": {
label: "USA",
data: [[1988, 483994], [1998, 83994]]
},
"russia": {
label: "Russia",
data: [[1988, 218000], [1998, 28000]]
},
"uk": {
label: "UK",
data: [[1988, 62982], [1388, 62982]]
}
};
var datasetsA = {
"usa": { label: "USA",
data: [[1998, 483994]]
},
"russia": {
label: "Russia",
data: [[1988, 218000]]
},
"uk": {
label: "UK",
data: [[1988, 629822]]
}
};
// hard-code color indices to prevent them from shifting as
// countries are turned on/off
var i = 0;
$.each(datasetsA, function(key, val) {
val.color = i;
++i;
});
// insert checkboxes
var choiceContainer = $("#choices");
$.each(datasetsB, function(key, val) {
choiceContainer.append('
' +
''
+ val.label + '');
});
choiceContainer.find("input").click(plotAccordingToChoices);
choiceContainer.find("input").click(plotAccordingToChoices2);
function plotAccordingToChoices() {
var data = [];
choiceContainer.find("input:checked").each(function () {
var key = $(this).attr("name");
if (key && datasetsA[key])
data.push(datasetsA[key]);
});
if (data.length > 0)
$.plot($("#placeholder"), data, {
yaxis: { min: 0 },
grid: { hoverable: true, clickable: true },
points: { show: true },
xaxis: { tickDecimals: 0 }
});
}
plotAccordingToChoices();
plotAccordingToChoices2();
function plotAccordingToChoices2() {
var data = [];
choiceContainer.find("input:checked").each(function () {
var key = $(this).attr("name");
if (key && datasetsB[key])
data.push(datasetsB[key]);
});
if (data.length > 0)
$.plot($("#placeholder2"), data, {
yaxis: { min: 0 },
grid: { hoverable: true, clickable: true },
points: { show: true },
lines: { show: true },
xaxis: { tickDecimals: 0 }
});
}
});
[/code]
This discussion has been closed.