JQPlot Legend outside of graph - javascript

I am using JQPlot and I have many graphs on one HTML page. Each of the graphs has the same legend.
My question is this: Is it possible to display a legend totally outside of the graph with its own position on the HTML page or in its own div?

legend:{
show:true,
renderer: $.jqplot.EnhancedLegendRenderer,
location: 's' ,
placement : "outside",
marginTop : "30px",
rendererOptions: {
numberRows: 1
}
},
You can use placement : "outside" like in the above code. And you can move it using marginTop,marginBottom,marginRight,marginLeft properties.

Maybe you could hide the legend of the 2nd to the last graph, like this:
legend: { show:false}
and in the 1st graph, put something like:
legend:{
show:true,
placement: 'outside',
rendererOptions: {
numberRows: 1
},
location:'n'
This way you will only show one legend at the top of the graphs.

Are you looking for title? You can style .jqplot-title to appear differently. It appears outside of the graph by default.
$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
{ title:'Exponential Line',
axes:{yaxis:{min:-10, max:240}},
series:[{color:'#5FAB78'}]
});
You could also restyle the legend. See table.jqplot-table-legend at http://www.jqplot.com/docs/files/jqPlotCssStyling-txt.html

Related

ECharts: how to show all axis labels?

Echarts seems to have a nice feature that automatically chooses which labels to display depending on the space provided. However, this algorithm seems to be bit too aggressive at times and does not take into account text rotate. I've gone through the chart options and there doesn't appear to be a way to disable this feature. I'm hoping it's just something I've overlooked. Help appreciated.
axisLabel (under yAxis or xAxis) has an option interval. Set this to 0 and labels will be displayed.
You can try this to force the label of the x-axis,
xAxis: {
type: "category",
data: data[0],
axisLabel: {
interval: 0,
rotate: 30 //If the label names are too long you can manage this by rotating the label.
}
//If your label is in the `y-axis` simply change the code `xAxis` to `yAxis`.
If your axis label is not showing in a chart frame (mean ECharts label's length is too long), Try this,
grid: { containLabel: true },
2 ways to solve long label text
Using rotate option xAxis : { axisLabel: {
rotate: 45
} }
Using formatter and introducing '/n' to break the text
just for the record:
If your categories have a fixed width, you can also set it up like this, in order to show all labels:
axisLabel: {
width: 100, //fixed number of pixels
overflow: 'truncate', // or 'break' to continue in a new line
interval: 0,
},

How to display legend in Highcharts Waterfall Chart and make the sum column of waterfall appear in multiple colors?

I tried to find a lot about this but didn't get the answer. For waterfall charts in Highcharts
legend: {
enabled: true
}
didn't seem to work. Can you suggest how can we display legend on a waterfall chart? Also, can we have the value of 'y' for every column displayed on top of the column, instead of being displayed on the column? For this change, with most of the other charts,
plotOptions: {
column: {
dataLabels: {
enabled: true
}
}
}
But this didn't work with waterfall charts.
And finally, is there a way we can make the sum bar look like an aggregate of the other bars in terms of color as well? Like, in the example shown -
My code is here - http://jsfiddle.net/yr779/236/
I am not sure what you are asking regards to the legend. Your jsFiddle is showing a legend - you only have one series "Series 1" and it is in the legend. To display the value of each waterfall you need to use the correct plotOptions:
plotOptions: {
waterfall: {
dataLabels: {
enabled: true,
crop: false,
inside: false,
overflow: 'none'
}
}
},

highcharts customize legend for different series

I have 2 pie charts and each have 2 legends. i want to position 2 on right and 2 on left..how would i do that ?
I tried to add legend in a series rather than chart...but it did not work...
chart.addSeries({
name: data.series[i].name,
data: data.series[i].data,
type: data.series[i].type,
showInLegend: true,
legend: {
enabled: true,
floating: true,
verticalAlign: 'bottom',
align:'right',
y:100,
itemStyle: {
textDecoration: 'underline'
}
},
}
});
any clues or guidelines would be appreciated...
Thanks
From what I know, each chart can only have one legend, and that needs to be configured using the "legend" attribute for the entire chart, not per series.
I would suggest using the renderer methods (http://api.highcharts.com/highcharts#Renderer) to display a fixed, HTML-style legend, or use HTML/CSS to create a legend (which would technically live outside the chart) where the items are clickable.
Here is an example I created with a custom legend: https://www.frbatlanta.org/chcs/labor-market-distributions.aspx (see the parts with the checkboxes and drop-down menus). It is easy enough to create a click event from your custom legend to show/hide the associated series.
I'll be glad to edit a fiddle, if you provide one.

FLOT plot chart legend CSS being overwritten

I am experimenting with the FLOT plot tool and having some problem with the legend. Specifically, the CSS for the legend must be being overwritten somewhere in my code because the legend is looking like this:
When I try to pass legend options to the plot, they do not appear. What do I need to do fix this CSS problem? Thanks.
Here is some of the code I am working with:
var options = {
series: {
lines: { show: true },
points: { show: true },
legend: {
margin: 5
}
}
};
$.plot("#flotcontainer", [ json ], options);
The margin option from flot specifies the distance to the plot edge which seems about right at 5 pixels. Try to set the position option too (see the documentation for more information).

ExtJS Area Charts - Instead of stacking the areas on top of each other, how do I super impose all areas together with a different opacity?

I'm creating an area chart using ExtJS 4.1 and everything is rendering fine.
I have two areas and currently one area appears on top of another.
Instead of that behavior, how do I superimpose all the areas? I can change the opacity so that all areas are visible.
The examples given in the API documentation and several online sources show the stacked behavior only. Is that the default and only implementation of the area charts, or am I missing a simple configuration?
As seen in Area Charts Example, instead of all colored areas appearing one after another, I want them all in a single plane.
Kindly provide your inputs and suggestions.
Use Line chart with fill instead. Works for me.
This can be done using creating additional series instead of a single area series with an array of data points in y axis. Got the answer from Sencha forums.
series: [
{
type: 'area',
highlight: false,
axis: 'left',
xField: 'name',
yField: ['data1'],
style: {
opacity: 0.50
}
},
{
type: 'area',
highlight: false,
axis: 'left',
xField: 'name',
yField: ['data2'],
style: {
opacity: 0.70
}
}

Categories