Chart Grid lines


#1

Hi,

How can i change the grid color, width.

When I fill my chart with area color, grid lines in area not visible. How can they should draw at front


Android labels hidden with negative tick gap
#2

Hello Absbmbtest,

You can customise the gridlines on your chart by modifying the majorGridLineStyle property on the style object of the appropriate axis. Below is an example of how to change your Y-axis grid lines to be red and 5 points wide:

// Create your axis.
    SChartNumberAxis *yAxis = [[SChartNumberAxis alloc] init];
    yAxis.title = @"Axis Title";
    
    // Modify the majoriGridLineStyle property.
    yAxis.style.majorGridLineStyle.lineWidth = @5;
    yAxis.style.majorGridLineStyle.lineColor = [UIColor redColor];
    yAxis.style.majorGridLineStyle.showMajorGridLines = YES;
    
    // Assign the axis to your chart.
    _chart.yAxis = yAxis;

Thanks,
Jan


#3

thanks.  Its work for me. another query - If  I fill my chart area with color  suppose green color then In that filled area grid lines are not visible. IF I set alpha of area color say 0.5  then i able to see it. is there another way?


#4

What property are you setting to control you background colour? The grid lines should always be on top of your chart’s background. Can I also ask what version of charts you are using? You can find this out by logging [ShinobiChart getInfo].

Jan


#5

I am using trial version - Version: 2.3.0.

my code:

chart.plotAreaBackgroundColor = [UIColor yellowColor];

    SChartLineSeries* lineSeries = [[SChartLineSeries alloc] init];
    lineSeries.style.areaLineColor = [UIColor blackColor];
    lineSeries.baseline = @0;
    lineSeries.style.showFill = YES;
    lineSeries.style.lineColor = [UIColor redColor];
    lineSeries.style.areaColor = [UIColor redColor];
    lineSeries.style.areaColorLowGradient = [UIColor whiteColor];

Grid lines are on the top of charts background . But not on the area color fill. Can I draw grid line on top of area color too?


#6

Hi absbmbtest,

There isn’t currently a way to bring your gridlines above your area fill. I’ve raised this as an issue to our development team so this might be a feature that is added in an upcoming release.

In the meanwhile, you could try manually bringing your underlay (which is where your gridlines are drawn), above your glView (which is where your series are drawn). I must stress though, that we don’t support this behaviour, and that tampering with the layering of the chart could cause other affect other features.

Having said that, I managed to get the gridlines of my chart on top of my series by doing the following in my view controller:

// You'll need to import the following.
#import <ShinobiCharts/SChartCanvas.h>
#import <ShinobiCharts/SChartLayer.h>
#import <ShinobiCharts/SChartCanvasUnderlay.h>

// Set up chart.
...

// Add chart to subview.
...

// Bring our underlay in front of our GL view.
[self.chart.canvas insertSubview:self.chart.canvas.underlay aboveSubview:self.chart.canvas.glView];

Thanks,
Jan Akerman


#7

thx it solve my problem.


#8

Is there a workaround in Android too? I’m facing the same issue. The version is 1.7.2. Thanks in advance 


#9

Double post


#10

Double post


#11

Double post 


#12

Hi

shinobicharts for Android does not currently offer the option to have the grid lines drawn above the fill. One workaround is that you could use the AnnotationsManager (a premium feature) to draw a line annotation for each major tick mark that is drawn. To add a line annotation the appropriate methods would be:

https://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.8.2/Premium/Normal/apidocs/reference/com/shinobicontrols/charts/AnnotationsManager.html#addVerticalLineAnnotation(java.lang.Object,%20float,%20com.shinobicontrols.charts.Axis<?,%20?>,%20com.shinobicontrols.charts.Axis<?,%20?>)

https://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.8.2/Premium/Normal/apidocs/reference/com/shinobicontrols/charts/AnnotationsManager.html#addHorizontalLineAnnotation(java.lang.Object,%20float,%20com.shinobicontrols.charts.Axis<?,%20?>,%20com.shinobicontrols.charts.Axis<?,%20?>)

The suitability of this approach would all depend upon your use case. Please be aware that an Annotation is essentially a View and as such will result in a certain overhead borne during the measure, layout and draw phases. If you have a lot of major tick marks, and / or supported pan and / or zoom gestures, performance may suffer as these ‘gridline’ Views are repositioned.

If you were to use this approach with gestures, you may find the following listener method useful to help you take action (such as add or remove an Annotation) as a new major tick mark is about to be drawn:

https://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.8.2/Premium/Normal/apidocs/reference/com/shinobicontrols/charts/ShinobiChart.OnTickMarkDrawListener.html#onDrawTickMark(android.graphics.Canvas,%20com.shinobicontrols.charts.TickMark,%20android.graphics.Rect,%20android.graphics.Rect,%20com.shinobicontrols.charts.Axis<?,%20?>)

Another approach might be to instead, draw the lines yourself. In this case rather than add View objects, you could make calls to Android’s drawLine method on the Android Canvas. This approach should be more performant.

You would not be able to draw the lines directly to the chart, but we recommend you lay a suitable View over the top of the chart, using the same dimensions and layout parameters as the chart itself. You can then draw the grid lines onto this.

To help you position the lines, let’s consider the x axis. First, to obtain the x axis position, relative to the chart, you would obtain the tick mark data value from the suitable TickMark object given to you on the call to the onDrawTickMark() listener method. 

When this method is called, you are also given the Axis object. In this case this would be the x axis. You could take the tick mark value and convert it to a pixel value, which is relative to the chart. The following method would help you do this:

https://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.8.2/Premium/Normal/apidocs/reference/com/shinobicontrols/charts/Axis.html#getPixelValueForUserValue(T)

To obtain the y axis pixel values, you need to know the top and bottom pixel values of the plot area, relative to the chart. This is because you don’t want the grid line to appear to draw on your axis. The following method may help you with this:

https://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.8.2/Premium/Normal/apidocs/reference/com/shinobicontrols/charts/ShinobiChart.html#getPlotAreaRect().

I hope that you find this information helpful. We do base our future development roadmap on customer demand and as such, I will make a note of your request for this feature. If you have any further questions, please do get back in touch.

Thanks

Kai


#13

Hi Kai, thanks for your answer. The chart is touch enabled. I already tried to draw vertical annotations on the major ticks, but, as you said, the performance during chart dragging is quite poor.  smiley cry


#14

Hi Fabiosassu.

Did you manage to try the other solutions I mentioned, such as drawing lines onto a seperate View laid over the chart?

Thanks

Kai.