adding attribute to data series, is it legit ?
49 views
Skip to first unread message
Eric Deveaud
Jun 7, 2015, 12:44:04 PM6/7/15
to flot-...@googlegroups.com
Hi there,
as I have a bunch of graph to display on one page, and as I need to be abble to display some more information while interacting with the graph I thought of the following:
add to data series object some specific attributes that I will use with tooltips functions.
eg: one simple example,
and in tooltip use the following:
this way each of my graphs embed his own adddendum and auxiliary data
is this legit ??
or it is a more recomeded way of doing this kind of task ?
Eric
as I have a bunch of graph to display on one page, and as I need to be abble to display some more information while interacting with the graph I thought of the following:
add to data series object some specific attributes that I will use with tooltips functions.
eg: one simple example,
var jobdataset_1 = [
{ data: jobs_1,
color: "#5482FF",
label: "calls by packages",
addendum: "users", // will be displayed for interactivity
aux: njobs_1, // will be displayed for interactivity njobs = array of values
}
];
and in tooltip use the following:
$.fn.UseTooltip = function () {
$(this).bind("plothover", function (event, pos, item) {
if (item) {
if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
previousPoint = item.dataIndex;
previousLabel = item.series.label;
$("#tooltip").remove();
var color = item.series.color;
var infos = item.series.data[item.dataIndex];
var pack = infos[0];
var n = infos[1];
var nuser = item.series.aux[item.dataIndex];
var addendum = item.series.addendum;
showTooltip(item.pageX, item.pageY, color,
"<strong>" + pack + "</strong><br>" + n + " calls<br>"+ nuser + " " + addendum);
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
};
this way each of my graphs embed his own adddendum and auxiliary data
is this legit ??
or it is a more recomeded way of doing this kind of task ?
Eric
Ced
Jun 7, 2015, 6:34:50 PM6/7/15
to flot-...@googlegroups.com
That's perfectly acceptable. You just need to make sure your attributes won't conflict with any attributes used by flot or any plugins you may be using.
Another trick you can use is to add data directly in the data points themselves but there is a caveat.
Normally a data point is simply [x,y].
However, you can store additional data about each point as [x, y, a, b, c, etc] where a, b, c, etc are your own values.
The only thing you need to watch out for here is that some flot plugins/features use this trick internally. So depending on the plugins you are using, you may need to leave room for the plugins to do their work and reserve array positions for them.
For example, if you're using plugins that use the 3rd and 4th array positions, you would specify your data as [x, y, null, null, a, b, c, etc]
To find out if a particular plugin uses this mechanism, I usually just read the plugin's comments/code.
Another trick you can use is to add data directly in the data points themselves but there is a caveat.
Normally a data point is simply [x,y].
However, you can store additional data about each point as [x, y, a, b, c, etc] where a, b, c, etc are your own values.
The only thing you need to watch out for here is that some flot plugins/features use this trick internally. So depending on the plugins you are using, you may need to leave room for the plugins to do their work and reserve array positions for them.
For example, if you're using plugins that use the 3rd and 4th array positions, you would specify your data as [x, y, null, null, a, b, c, etc]
To find out if a particular plugin uses this mechanism, I usually just read the plugin's comments/code.
Eric Deveaud
Jun 8, 2015, 11:48:23 AM6/8/15
to flot-...@googlegroups.com
I will refine a little my naming scheme in order to have something more clean.
I was using the second solution but encounter some problems when displaying categories using log scale on yaxis
categories bars are not displayed correctly
see this simple example
<html>
<head>
<title>test case</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- jquery -->
<script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- jquery flot -->
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script>
<!-- jquery categories -->
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.categories.js"></script>
<script type="text/javascript">
var broken = [ ['V5', 9500, 2], ['V6', 95, 92], ['V7', 9, 13], ];
var ok = [ ['V5', 9500], ['V6', 95], ['V7', 9], ];
var DataSetBroken = [ { data: broken, label: "broken dataset"} ];
var DataSetOK = [ { data: ok, label: "correct dataset"} ];
var Options= {
series: { bars: { show: true, }, },
bars: { align: "center", barWidth: 0.8 },
xaxis: {
mode: "categories",
show: true,
},
yaxis: {
axisLabelUseCanvas: true,
ticks: [ 1, 10, 100, 1000, 10000 ],
tickFormatter : function (v, axis) {
return "10" + (Math.round( Math.log(v)/Math.LN10)).toString().sup();
},
transform: function(v) {return v == 0 ? 0 : Math.log(v);},
},
};
$(document).ready(function () {
$.plot($("#testbroken"), DataSetBroken, Options);
$.plot($("#testok"), DataSetOK, Options);
});
</script>
</head>
<body>
<div id="testbroken" style="width:600px;height:450px" class="placeholder"></div>
<div id="testok" style="width:600px;height:450px" class="placeholder"></div>
</body>
</html
using 3 values (X, Y, supinfos) for the datapoints leads for the following
this lead to an incorrect graph representation
best regards
Eric
Reply all
Reply to author
Forward
0 new messages