I'm trying to implement distribution histogram in highcharts. That is simple histogram but I want to put percents values as categories between the columns and '0%' in the middle of the middle column. I'm trying to move categories with tick positions and using multiple axis but that doesn't help.
That what I got now, hope that helps to understand what I'm trying to do.
[jsfiddle](http://jsfiddle.net/cwbyyang/)
I need to move '-25%', '-10%', '-5%', '5%', '10%', '25%' to ticks grid lines.
It doesn't make sense with the numbers given (the distance between 0 and 5% is 1.5 times the distance between 5 and 10%), but using three x axes and the x property of the labels, this is possible.
example:
http://jsfiddle.net/cwbyyang/2/
labels: {
x:-40
}
Related
I'm using highcharts and trying to add labels to the grid lines of a polar chart, however, I can only add labels to the first axis (which is the y-axis in the cartesian coordinate system).
Polar charts are not well covered (as well as labels on grids) in the highcharts docs. My current approach is placing the labels manually on the correct positions, which will get cumbersome due to dynamic number of categories and sizes of my chart. Additionally, exporting the chart will not support labels anymore.
Background: Let's assume I am selling tickets for clubbing from Monday to Friday (no weekends, bad choice) for the clubs Green, Black, and Blue. Now, I want to know which club performed best on each day, and also how many tickets are sold in total. Therefore, I'd like to apply different scalings to each axis as attached (manually manipulated). I'm currently normalizing the ticket sales for each day to 0…1 which does the job for comparing each single day, but I can't apply the different labels to the axis.
One way might be to add more panes (with startAngle correction) and yAxes with different scales, so dataLabels are showing as in your image.
Example: http://jsfiddle.net/6b9m7Lvb/
Problem - each yAxis can have only a single pane, each series can have only a single yAxis, so there is one scale for a series - no matter what category.
Another way could be to do the same, but have all yAxes linked to each other, so scale is the same for all. Next it is possible to change axis labels and tooltip display, to match your image.
Example: http://jsfiddle.net/6b9m7Lvb/1/
I am having issues with my implementation of CorePlot. I have a subview in my UIViewController than contains the chart. Most of the data shows up fine but no increments / values are showing up on the y axis.
This is what I am seeing now:
If I shift the x axis start point by subtracting 10 (to better see the left half of the chart) I see this:
For the record, I do not have any values outside of the (positive x, positive y) quadrant on the chart and have logged out my data to verify this. Any input / advice would be appreciated, thank you!
http://www.raywenderlich.com/13271/how-to-draw-graphs-with-core-plot-part-2
This guy does a great job explaining that about halfway down... search for "You're Getting There!" to find exactly where he talks about the weird lines in the Y axis.
Hope this helps!
Set the leftPadding on the graph.plotAreaFrame to leave room for the axis labels at the left side of the graph.
The smeared y-axis is caused by too many tick marks and labels—they overlap and become illegible and negatively impact drawing performance. You need to adjust the labeling parameters to reduce the number of ticks and labels. By default, the axis draws major tick marks and labels one unit apart. The properties that need to be changed depend on the labeling policy you want to use.
I have a line chart with a limited Y axis (1-5). There are six different lines represented on the chart (3 each from two different users: measuring feeling 1, feeling 2 and feeling 3 from 1-5).
When users enter the same value over time (for instance, ranking feelings 1 and 2 as 5 for several weeks), the two lines completely overlap and you can only see one.
Is there a way I can offset a particular line by say, a couple pixels up and to the right so if there are two different lines representing same values over time, I can see both at once?
Using pointPlacement it is possible to slightly offset each series, so points with the same values do not overlap each other. The tooltip will still work as if points would overlap, so setting shared to true should help.
Example: https://jsfiddle.net/BlackLabel/3mhyojtd/1/
Another option that will allow not shared tooltip would be to use scatter type series with lineWidth set to 2, to imitate line type series.
Example with scatter series: https://jsfiddle.net/BlackLabel/r6pL4f2j/
Please refer the fiddle codehttp://jsfiddle.net/yuvarajkumarg/az290eyq/1/
In Highchart of type Chart, when we plot for height = 0 and pressure = 2, we get a gap as shown in jsfiddle. I want point to be plotted on the X-axis(2,0). But the graph looks like it is plotted on (2,2) since the y-axis plot starts way above the x-axis. How to remove the gap ?
The issue is the categorized axis.
There are probably a few ways around the issue, but I would do it this way (on your xAxis):
tickmarkPlacement: 'on',
min:0.5,
max:6.5
Example:
http://jsfiddle.net/az290eyq/2/
You could also do it by not using categories, and using the axis label formatter in order to display the numeric sequence that you need.
[[ edit for comments:
For the min and max values - the x axis values for a categorized axis are the category array index values. So the first category is x = 0, the second is x = 1, etc.
Because Highcharts puts the the label in the center of the value's space, setting the min/max to the actual min/max value +/- 0.5 will align the center of the space with the start/end of the axis.
So, you can calculate this dynamically by using 0.5 for the min, and counting the categories array and using (count -1.5) as the max.
Additionally, setting the tickmarkPlacement proerty to 'on' moves the tick mark to the center of the space as well, aligning the ticks with the start/end of the axis as well.
I'm in the process of evaluating Highcharts as a replacement for our current platform, and have some questions about how we can replicate one of our existing charts:
I've been able to recreate the basic floating stacked column chart, but need help with some of our specific features.
1) Is is possible to replicate the multiple y-axes with the columns displayed to the right of each within a single chart? If not, I suppose we could do 3 charts next to one another - and draw our own titles above (and data table below). If we go this route, is there a way to group all these elements in a single "container"? We need to export these charts to images and need to end up with a single image that looks like the one attached.
2) How would I create the inner box within each column? Do I need to draw it myself, or can I create another column series with a border and transparent fill and somehow set the width of the column to be less than the width of the main columns (note that the number of columns on each chart is dynamic, so the column widths can't be a fixed size. i.e. the inner box width needs to be a percentage of the main column width)?
3) Assuming #2 is possible, I could probably use the same technique to plot the horizontal line - just make the height 0 (or very small) and make the bar wider instead of smaller. Is there a better way?
4) How do I get the x coordinates of the columns so we can align our data table under each column?
5) Can I separate the individual points within the column. You'll notice in my jsfiddle, product 1 and product 2 are vertically aligned in the center of the column. Can I spread them out within each column as the 2 points are in the screenshot?
Thanks in advance for advice on all or any of the above.
Mike
1) You can use multiple yAxis, see the example
2) You can use renderer or mix column/column range and border parameter, example
plotOptions: {
columnrange: {
pointPadding:0.2,
color: 'rgba(255,255,255,0)',
borderColor: '#303030'
}
},
3) Use renderer, as above or scatter series with customied marker
4) Column is shape in point.element.graphic, so you can extract it.
5) as far as I know, it is not possible