I have a richshaw plot with tooltips enabled (Rickshaw.Graph.HoverDetail). I need to display more information in it, not just series y values. Can it be accomplished with Richshaw or do I have to use the underlying d3 functions.
Sorry for the late response. Yes you can actually render whatever you want inside rickshaw tooltips with Rickshaw.Graph.HoverDetail .
Lets say for example that you have a function that requires as inputs series, x and y and lets assume that we have another array with the same length as x array called dates:
var hoverDetail = new Rickshaw.Graph.HoverDetail({
graph: graph,
formatter: function(series, x, y) {
var content = '<span class="graph-dates">'+dates[x]+'</span><br><span class="graph-price">'+series.name+": "+currency+parseInt(y) +'</span>';
return content;
}
});
The code renders on the hover details a date for the chosen x point and the price for that date.
In the documentation of rickshaw graph you can find further information.
Here is the actual example by rickshaw.
Related
I have an array of data for values and an array of data for sample counts and I would like to display both in the tooltip for the point on the line chart.
I am using a web call to populate the arrays of data using an angular.forEach loop. I then set the data series of the chart as:
var all_values= [];
var all_samples= [];
var timespan= [];
angular.forEach($scope.data, function (value, key) {
all_values.push(value.All_Values); //y axis values
all_samples.push(value.All_Samples); //additional tooltip data
timespan.push(values.TimeSpan); //this is for the x axis
});
$scope.chartConfig.series[0].data = all_values;
All of this works fine but how can I get my all_samples to be included in the data series so that I can display it on the tooltip?
If you want to display extra info in tooltip, then you need to set custom pointFormat / pointFroamtter / format / formatter - depends how much you would like to change tooltip display. Next, you could have external array for extra info or you could just add more properties to each data point. If you are using arrays for data points, then use keys.
Example: http://jsfiddle.net/ge2rbgt9/
After hours and hours playing with canvasJS I couldn't find a way to dynamically remove points from my chart in an elegant way.
What I want to do is to allow users to select/deselect data he want to see plotted. For instance, on a chart that shows data from Jan/2014 to Dec/2014 (axis X), if the user choose not to show Feb/2014, I iterate thru dataPoints, remove such point and call render(). The column with data corresponding to February then disappear, but on X axis, the label for February is still shown, creating a "hole".
If First or Last item is deselected, then the result is OK, such month is not displayed.
I have tried using Date() for x, tried using Integers for x and formatting the Date as a label but none worked for me.
So, before starting looking for another solution I would like to know if you guys could help me out figuring what I`m doing wrong.
Best regards!!
I have gone through the question and created an example. Here is the JSFiddle
Here is the logic which I used:
for(var i=0; i<dataPoints.length ; i++){
var dp = dataPoints[i];
var dataPointMonth = (new Date(dp.label).getMonth());
if( dataPointMonth !== monthToHide){
dp.x = index++;
newDataPoints.push(dp);
}
}
You can use labels instead of x value in this case and use formatDate method in order to format date values as required and use labelFormatter for further customization.
labelFormatter : function ( e ) {
return CanvasJS.formatDate( e.label, "MMM");
}
I'm trying to build a highchart that when you hover over a scatter point you will get a separate unique id for the point. I dug around for this information in the forums for a while and can't find it.
I found this: Display array values as unique tooltip in highcharts but it's a category based reference. I want each point to have it's own id.
So my data is as follows:
Sample ID Y
Samp1 115.90 179.00
Samp2 37.50 188.00
Samp3 27.80 64.00
Samp4 51.90 228.00
Samp5 27.20 863.00
Samp6 478.80 575.00
Samp7 39.10 598.00
Samp8 22.80 244.00
I want the tooltip to display the series name, sample and the values of x and y for each point.
This helps me identify a point easily by not having to look it up by the x and y values. So for each point I want the tooltip to report the sampleID (which would be samp1, 2, etc)
here is the fiddle: http://jsfiddle.net/776yN/
I advice to parse your data (in preprocessing) to avoid using array (for single point) like [10,10] but use object
{
x: 10,
y: 10
id: 'sample12'
}
Then you will have access to custom parameter by this.point.options.id in tooltip parameter
I am uisng tickPositioner to plot certain dates on X Axis.
xAxis: {
......
tickPositioner: function(min, max) {
// custom function which returns dates array.
return getDatesBetweenRange(min, max);
},
.....
}
using Highstock v1.2.5.
I also have Show/Hide series option in the Legend. It works fine no issues till here.
Now, When I hide any series from the chart.
I do not want to show those dates on x Axis who have no data as the series is hidden.
I was looking into source code at "getOffset:" method where Label is being created for each
Tick.
Is there any relation in API which returns all series points for this Tick ?
Or
Is there any relation in API that says that this tick pos (e.g. date) has no data visible ?
As I know, you can use a little different solution:
In tickPositioner you have access to all series for specific axis via this.series. Now, each of these series have xData which contains all x-values. All you need to do now is check if series is visible, and then compare your tick values (generated by getDatesBetweenrange()) with values in xData arrays - and return only these values which could be find there.
The topic of filling area between series has been discussed quite a lot. I've seen some solutions using 'arearange' series ( adding dummy serie with area range to add the fill color ) or using 'stacked area' ( using dummy area serie with stacking: true, transparent under the actual series, then add another stacked area with the needed color ). An example can be seen here.
but my problem is quite specific : I need to fill the area between to series which don't share the same yAxis, thus I can't add a dummy serie since I can't figure which of the yAxis to use.
( The same problem occurs when series don't share the same xAxis reference values, as seen in this example )
For example, let's say I want to fill the area on this chart where the blue 'rainfall' line is under the green 'temperature' line : JSFiddle example
How can I do that ?
I've accepted Sebastian answer and I publish here its implementation :
I've created a function that generates a dummy series with the type 'arearange', using the data of the first series and a modified version of the data in the second series in order to map them on the main yAxis :
/**
*generate a dummy arearange series in order to fill area between our two series.
*/
function createRangeSerie(data1, min1, max1, data2, min2, max2)
{
//we will apply a linear transfomation to values from the second series
var b = min1-min2;
var a = (max1 - b) / max2;
var rangeData = [];
$.each(data1, function(index, value) {
var value2 = a*data2[index] + b;
rangeData.push([value, value2]);
});
//return the third series, used to fill the area between our 2 series.
return {
name: 'areaRangeSerie',
type: 'arearange',
data: rangeData
};
};
then I use it to add the new area in my chart as seen in this fiddle example :
http://jsfiddle.net/2me4Z/3/
Thanks again guys!
LIMITATIONS :
What I was afraid of occurs : in the case I want to fill only if the first curve is under the second (or vice versa). there is a problem on the adjacent points. As you can see in the updated JSfiddle. So this solution is still not perfect, I'll improve it.
LAST VERSION :
In my final version, I've added the intersection point to my arearange serie. Now the result is perfect. You can see the result an the algorithm here in this JSFiddle
as you can see, I4ve changed the xAxis so I've got values for computations instead of categories.
Edit : here is the function to find the intersection point from two lines ( each defined by two points so we need 4 arguments : line1Point1 line1Point2, line2Point1, line2Point2). I don't sue pixel coordinates but I compute intersection from my x and y values since the resulting point will be mapped by the highchart library the same way.
function intersectionPoint(l1Pt1, l1Pt2, l2Pt1, l2Pt2){
console.log(l1Pt1, l1Pt2, l2Pt1, l2Pt2);
//compute A B and C for the first line: AX + BY = C
A1 = l1Pt2.y-l1Pt1.y;
B1 = l1Pt1.x-l1Pt2.x;
C1 = A1*l1Pt1.x + B1 *l1Pt1.y;
//compute A B and C for the second line
A2 = l2Pt2.y - l2Pt1.y;
B2 = l2Pt1.x - l2Pt2.x;
C2 = A2*l2Pt1.x + B2*l2Pt1.y;
var delta = A1*B2 - A2*B1;
if(delta == 0) {
console.log("Lines are parallel");
return null;
}
else
{
return {
x: (B2*C1 - B1*C2)/delta,
y: (A1*C2 - A2*C1)/delta
};
}
};
I'm really expecting highchart to give a full official support for it since it will become again more complex when using logarithmic axis X(
You can use the same two linked axis (the same ranges /ticks) but with different data, and then use additional series with arearange type: http://www.highcharts.com/demo/arearange
I think your options are pretty much one of these two:
1) Normalize your data before sending it to the chart so that they can use the same axis.
2) Develop a complex script to determine where the series are in relation to each other and create your dummy series accordingly.
HOWEVER.
It's extremely important to consider the fact that with two series using two separate axes, measuring two different things on two different scales....
The interaction between the 2 lines is completely meaningless.
It is one of the major common pitfalls of data visualization to highlight the interaction between two such lines, but the interaction is entirely dependent on the mostly arbitrary scaling of the two completely different axis measurements.
FWIW.