Can jqplot show different series' legends in different locations? - javascript

I have a graph (http://jsfiddle.net/CfVZP/12/) with several series where the y-axis data is on two different scales. I'm using the yaxis for one scale and the y2axis for the other. I'd like to be able to display the legend for the series using the yaxis on the left side of the graph (location: 'nw') and the legends for the series using the y2axis on the right side (location: 'ne'). Is there a way to set different legend properties for different series?
Something like:
{series: [
showMarker: true,
color: "#00FF00",
legend: { // This doesn't actually work.
location: 'ne', // I'm looking for a substitute
} // for this functionality.
],
// Additional series with different legend locations
}
It doesn't seem possible to do this using the standard legend options (I tried playing with the position and the EnhancedLegendRenderere column options), but I was wondering if there is a different plugin that might be able to make this happen, or some other option that can be altered to cause the same result.

I'm not sure if this is going to be possible. Looking at the jqplot source code, each plot holds only a single Legend object - for this to work you would most likely need it to hold an array of them.
Is there a particular reason you would like to do this? It would be a little unusual to have a plot with multiple legends. Would it not suffice to have a single legend but give each series a good, descriptive name?

Related

Assign a series to an axis in jqplot

I have a jqplot chart with 8 series. 7 of these are normalized in such a way that they look great with the default yaxis. The last series, however, needs to utilize a secondary yaxis. There are a ton of examples on utilizing a dual yaxis presentation when there are only two series.
So my question: Can you assign a specific series to a specific axis? If so, how?
Thanks in advance!
Ok -- I ended up finding an example in the api docs, where previously I was searching through the examples.
{
series:[
{color: '#ff4466', lineWidth: 5, label:'good line'},
{yaxis: 'y2axis', shadow: false, label:'bad line'}
]
}
The yaxis option is available per series, which allows a specific series to be assigned to a specific yaxis.
I hope this helps someone else.

Strange tooltip behavior with long series in highcharts

I'm using Highcharts for a project in which I have to display two series with about a thousand points each. The x-axis represents a date, and the y-axis a quantity. In addition, each point has an associated list of namesMy data is day-by-day without gaps, with a structure such as
var mydata = [ ...
{x: theDate, y: theValue, names: theNames},
... ]
where theNames is an array of strings. I can access these in the tooltip formatter through this.points.point.names, given that the range displayed on the chart is small enough. If I change the x-axes so that the start date and end date are more than roughly a year apart, then the tooltip is not rendered at all.
One of the possible avenues that I have tried but failed with so far is setting the turboThreshold limit to the length of the longest series plus 1. Setting this lets me at least display a graph when mydata.length > 1000 (the default value). However, this only displays the tooltip if the x-axis range is less than 261. Otherwise, the tooltip disappears entirely, as does the point.data object where I'm getting the name from.
I'm also not great at JavaScript, but I was wondering if there were a way to separate the names of the points from the array containing them (in my examples, myData1 and myData2) and somehow access those names from the tooltip function without going through the current point.
Here is the link to the jsFiddle demonstrating this issue.
All help is appreciated!
The problem is in dataGrouping, when disabled works fine: http://jsfiddle.net/34tfg/1/
DataGrouping is method in Highcharts to approximate points and display them when width of the chart is not enough, e.g. how to display 10 000points in a chart of width 1 000px -> 10 points in a one pixel..? And when dataGrouping is used, new points are created, so all your custom options like 'names' etc. are lost (at least not accessible).
Code:
plotOptions: {
line: {
dataGrouping: {
enabled: false
},
turboThreshold: 10000
}
},

Highcharts - accessing overlaying data points

I have a scatter series with two points that have the same coordinates. Each point has different data associated with it (for example weight and height of different people - two different people can have exactly the same height and weight):
series: [ {
data: [{x:193.5, y:80.7, name:'danny'},
{x:193.7, y:90.7, name:'oren'},
{x:193.7, y:90.7, name:'josef'},
{x:195.5, y:80.3, name:'thomas'}]
}]
Full example at jsfiddle.
When viewing the tooltips of the chart, the tooltip of the second point shows:
Oren: 193.7,90.7
Making the data of josef inaccessible.
I would like to make the data of both josef and oren accessible, for example by putting them inside of the same tooltip.
Oren: 193.7,90.7
Josef: 193.7,90.7
How would you achieve this effect?
assume a very large data set - iteration over the entire series each time is not an option.
You could use the Tooltip formatter ( http://api.highcharts.com/highcharts#tooltip ) to manually format your tooltips.
In the formatter compare x and y value of all other points in the series(this.series) If the values are the same, add the name of these points to the tooltip.

Grouped and stacked multiBarChart with NVD3

Possible duplicate question to Bar chart in Javascript: stacked bars + grouped bars
I'm trying to create a stacked bar chart that lets you compare 2 values (dark and mid blue) to last week's data points (the secondary light blues 'behind').
Starting with multiBarChart() with .stacked(true) first I tried merging both weeks into a single array of 14 bars, where the x position could help group the bars. I tried to form my combined array of objects where .x properties' values are 0, 0.3, 1, 1.3, 2, 2.3, etc.
Unfortunately unlike lineChart() it doesn't use the x value for positioning.
Another idea is to exploit the group .stacked(false), providing 4 items (instead of 2) with the same x value. These then appear overlaid on top of each other instead of stacked.
Here the spacing looks good, but how do I stack these 2 by 2?
Hey I just developed grouped+stacked bar chart on d3.js. It is not NVD3 but it may help you.
Source
Demo
Let me just say up front that I am SO not an nvd3 expert. I'm barely past the getting-started stage myself.
That said, it looks like you're making this too hard on yourself.
I think you really want to send nvd3 two sets of data, with the x's matching between the two. (E.g., (1,y1a) corresponding to (1,y2a), then (2,y2a) with (2,y2b), etc.)
You can see this more clearly by the following:
Head to their Live Code page
Select the Group/Stacked Bar Chart.
Select the Data (JSON) tab.
Replace the first function with the following, and observe the resulting x values.:
function() {
return stream_layers(2,10,.1).map(function(data, i) {
alert( 'Stream '+i+': '+JSON.stringify(data));
return {
key: 'Stream' + i,
values: data
};
});
}
Best as I understand it, that's the model you're looking for.

Flot charts: How do you alter styling options after the chart's been rendered (e.g. by means of code injection)?

Is it possible to change the styling of a Flot chart's components on the fly – either via the console or a script – after the fact that the chart has been rendered? I.e from somewhere outside the Flot chart's internal configs (which initially defined the styling of the chart).
To put my question into a simple use case: I have a page containing a Flot chart which has the wrong color on the bars. Using Web Inspector's JS console, I want to alter the bars (lines?) color from blue to, say, brown. (And I don't have any means to edit the configs in jquery.flot.js.) Now I wish to inject code from the console, that might change the color of the bars.
I only wish to be hinted of a basic code structure as I'm stuck (nope, I'm not a particularly intermediate or advanced user).
Screenshot 1 – the rendered chart, unaffected (arrow indicates what I want to change):
… Flot's API says:
$.plot(placeholder, data, options)
But I don't want to set/change the data (which has already been plotted out), I just want to change its color representation from blue to, say, brown. The only effect of changing something, that I managed to achieve, was this (terribly clueless) piece of code:
$.plot("#chart", { series: {color: "#6C564C"} });
Which turned the chart into (Screenshot 2):
I don't know why the chart disappeared, and we don't necessarily need to troubleshoot that. All I'm looking for is the simple structure for altering a Flot chart's options by means of code injection.
You can change the colour of an already-drawn series by changing the data object and using setData(). This is faster than calling $.plot() again but it won't recalculate the grid and ticks. If your actual data points don't change, this isn't an issue.
var data = [
{
label: "Your series",
data: rawData,
color: "#f00"
}
]
// Initial draw:
var flotObject = $.plot("#chart", data, options);
// ...
// Change the colour:
data[0].color = "yellow"; // Change only the colour of the original data object
flotObject.setData(data);
flotObject.draw();

Categories