I want to create a graph with four quadrants using flot. I need to have labels on both the left and right-hand sides of the graph - with the same ticks. Here is my code:
$.plot($("#placeholder"), [ [<%=points%>] ], { series: {lines: { show: false },
points: { show: true }},
yaxes: [{ ticks:[[0,"Left"]],max: 100, min:-100 },
{ position: "Right",ticks:[[0,"Right"]], max:100, min: -100 }],
xaxis: { ticks:[[0,"Bottom"]], max: 100, min:-100 } });
I get the "Left" and "Bottom" labels but nothing on the right-hand side. Thanks in advance for any help you can provide.
I had this same issue. In order to have the secondary y-axis appear on the right side of the plot, you need to have a series connected to it, but that lies outside your displayed data range:
{label:"dummy data",data:[[-1000,-100],[-1000,100]], yaxis:2} //yaxis array is indexed from 1
Since your range appears to be fixed, matching the ticks is pretty straighforward. My range and ticks was highly dynamic, so I got the ticks to match by including a complete duplicate series of my primary data hooked to the secondary yaxis. I just shifted it on the xaxis to be completely out of range for display.
Yes, this is wasteful, since it involves delivering extra data. But until Flot supports showing yaxes without series conencted, this will get it done.
Related
In a Highcharts column chart with a lot of data points, say one per day for a full year the columns are too wide in my opinion. How to give them a width of e.g. 1 pixel? I unsuccessfully tried this:
plotOptions: {
series: {
pointWidth: 1
}
},
Here's a jsfiddle.
Simply get rid of the border by setting borderWidth to 0. Take a look at corrected example below.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.column.borderWidth
Example:
http://jsfiddle.net/sLmj0z5z/
You have more series data so labes pointWidth: 1 is fine otherwise we have to delete series data or use like this
Highcharts API
chart: {
zoomType: 'x',
width:525
},
I want to represent two time series with Highcharts. My problem is that one has large values and the other one low values. When I plot them together, the one with low values appear as a straight line. I want to be able to plot them with two different scales, but find it impossible to do it. I put what I already have here on a jsfiddle, and the code is here:
$(function() {
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1,
inputEnabled: $('#container').width() > 300,
enabled:1
},
chart:{type:'line'},
series: [
{name: 'serie with high values',
color: 'red',
data: [1000,2000,3000,4000]
},
{name: 'serie with low values',
color: 'green',
data: [0.1,0.2,0.3,0.4,0.5]
},
],
legend: {
enabled:true,
},
})
});
I would appreciate if someone could point me how I could give a different scale to each time series - ideally, I will want to plot more than two, each of them having its own scale.
You can use to yAxis, like in the example
yAxis:[{
},{
opposite:true
}],
http://jsfiddle.net/S2uyp/1/
As the difference between high values and low values is very high so the chart is looking like this but if you try with the following values then you will see that the chart looks good
$(function() {
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1,
inputEnabled: $('#container').width() > 300,
enabled:1
},
chart:{type:'line'},
series: [
{name: 'serie with high values',
color: 'red',
data: [10,15,30,40]
},
{name: 'serie with low values',
color: 'green',
data: [0.1,1,5,10]
}],
legend: {
enabled:true
}
})
});
this is exactly what you want I guess.
Since you have an answer telling you how to accomplish specifically what you asked, let me add one that addresses the issue more fundamentally.
This is a classic example of when what you really need is two separate charts (generally, aligned vertically one above the other works best for line charts, where they can work with a common time axis).
That's a concept that seems to shock some people, but it really is the best solution, and there really is no negative aspect to having two charts instead of one.
The problem with plotting 2 series on one chart, with 2 different scales, is that it practically forces the user to make comparisons that are not real. When you plot 2 lines on a chart, the interaction of those 2 lines is generally something of importance, and will be seen as such by the viewer.
When the 2 lines have 2 different scales, the interaction is completely meaningless, and the two lines serve only to clutter the chart and obscure the message of the data.
Essentially, when you plot 2 series with 2 separate scales, you are making 2 charts already anyway - but you're scrunching them into one space where they get in each others way.
FWIW
{{UPDATE:
As an example, here is a fairly typical example of 2 series plotted on separate scales on the same chart:
http://jsfiddle.net/jlbriggs/GYbRY/
It could be cleaned up and improved a bit, but overall it's going to be a bit of a mess no matter what you do to it.
Here is the same data plotted on 2 separate charts, in significantly less space than the original:
http://jsfiddle.net/jlbriggs/m64Ys/
I feel it's hard to support the argument that the first example makes it easier to compare the variation in the two series.
I am trying to overlay 2 diagonal lines over top of a negative stacked bar chart. The purpose of these lines is to show where the optimal value for each bar should be.
The chart will always be from -10% to 10% along the x-axis, so the lines do not need to scale smaller if the graph grew. (though that would be nice to know how to do that as well if it's a small addition)
I am relatively new to HighCharts and I can't seem to find out if this is possible or not.
Given that the intersection of the lines are always going to intersect at the same point I made this. What I did was create two additional series that go from -10 to 0 and 10 to 0. You could do this with one series as well but maybe the male/female projection lines are different? Your choice.
Now, since I do not know where the two lines should intersect I had them end at the final category. You can adjust this by giving the two series different end points. The other trick is to fill the 2 projection lines with null for the in-between points and allow the 2 end points to be connected. I also hid the markers, hid the series from the legend, and allowed for different line styles.
Important bits:
{
name: 'line1',
type: 'line',
color: 'black',
dashStyle: 'dot',
connectNulls: true,
showInLegend: false,
marker: {
enabled: false
},
data: [0, null},
...
, 10]}
Since these data series are stacked we need to make sure only those series get stacked otherwise the 2 projected lines get stacked as well. Do this via:
plotOptions: {
bar: {
stacking: 'normal',
//pointWidth: 20
}
},
Note that is only applying stacking to the 'bar' types. Update jsFiddle.
I’m trying to get both the left and right yAxis to show the same start and end.
Is it possible to show the same increment on yAxis with multiple data series? If so could you provide a sample code or point to an example. Here’s what I’m trying to achieve.
Thank you in advance for your help!
Yes it is possible. You can control the axis labels by using the same min, max, and tickInterval for both axis. In the following example I use the following on both series:
min: 0,
max: 600,
tickInterval: 50,
Highcharts also has the functionality to link multiple axis together using the linkedTo attribute. All you have to specify in the properties of an axis is what axis it is linkedTo by specifying its index in the array of axes.
yAxis: [
{ // Primary
title: {
text: "Label for first Axis"
}
},
{ // Dependent Axis
title:{
text: "Label for dependent Axis"
},
linkedTo: 0
}
]
In the chart when it start drawing main series (LTP), It draws on whole width.
Is there a way to draw it just like the selector chart at bottom?
EDIT : I want entire xAxis viewable and then add the points without auto-scaling the xAxis.
Have a look at my code
http://jsfiddle.net/S9SwB/9/
Build up on #wergeld's solution here, as you see in his solution, the end of x-axis was position correctly at 5:30 but there was a suddent leap in time, this is because the ordinal property of the axis is set to true by default, which means all points are equally spaced in terms of pixels, immaterial of difference in terms of time, so the axis leaves enough room at right for just 1 point, and hence number of pixels required to add one point. On setting ordinal to false, it will allocate as much space as is needed based on time difference.
All in all, here goes your solution :) http://jsfiddle.net/jugal/UP5sW/
var min = new Date().getTime();
var max = min + 50 * 500;
//...
xAxis: {
ordinal: false,
max:max
},
series: [
{
name: 'Series 0',
data: [[min, 0]]
},
{
name: 'End',
data: [[max, 0]]
}]
More about ordinal option # http://www.highcharts.com/stock/ref/#xAxis--ordinal & http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/ordinal-false/