Urgent: Android Shinobi chart with gradient filled color and line color (1)


#1

Hi,

I want to create a graph such as shown in the picture below. I notice limitations with shinobi chart on Android:

  1. If i set the gradient fill color, i cannot set the line color to White color.

  2. I cannot connect the dots using a wavy shape curve.

It is very urgent, we intend to drop Shinobi chart from our Android App, due to the limited customisation features of Shinobi. So is there any advice from the Shinobi team?

Thanks,

Victor


#2

Hi Victor,

I’ll answer both your questions in the order they were asked:

  1. For a LineSeries, when you set the FillStyle to either FLAT or GRADIENT, the colour used for the line will be taken from the lineSeriesStyle.getAreaLineColor() method (rather than the lineSeriesStyle.getLineColor() method). This is also the case for the line colour below the baseline and the line width. Therefore if you set the areaLineColor to white you should get the affect you’re after:

lineSeriesStyle.setAreaLineColor(Color.WHITE);

see http://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.6.0/Premium/Normal/apidocs/docs/reference/com/shinobicontrols/charts/LineSeriesStyle.html#setAreaLineColor(int)

  1. Our library has to be flexible to a variety of users’ needs and as such it will plot the data it is given. This means if you want some form of smoothing to be applied to your data points then you will need to create a line series with enough points to give a suitably smooth curve. For something like the above chart I would recommend having two line series:
  • one for just showing the dots: so set it to show points but to not draw lines, its data adapter will only need the data points (no extra ones required)
  • the other for drawing the line: based on your data points you will need to add extra points to your data adapter to achieve a smooth curve. A potentially nice way of doing this would be to create a subclass of SimpleDataAdapter that contains the logic for creating the extra points based on the data points that are added to it. This way it would be reusable across your other charts.

I hope from that you can see that our library is very flexible and allows the user a lot of scope for creating a wide range of charts.

As an aside, if you have a ShinobiCarePlus support contract you can raise support tickets through our Customer Portal. While we, the development team, are very active on the forum, we do prioritise our ShinoibCarePlus customers and guarantee a response within 1 working day for them, and as such urgent requests are better made through that system.

Kind regards,

Patrick


#3

Hi Patrick,

On point number 2), as an example, i have a data series, say like: 6, 12, 14, 20, 14, 20, 6, 8, 20, 12. I want to smoothen the data connection. To do that, i need to create a second series, and artificially fill in some imiginary data, so that the data connection would appear to be smooth. Is it going to be like that?

Regards,

Victor


#4

Hi All,

When i am setting the gradient color, i want to set the color fill from darker color to lighter color as shown in the chart. The code to set the background color to purple:

                       cs.setBackgroundColor(Color.argb(255, 130, 56, 149));

                       cs.setCanvasBackgroundColor(Color.argb(255, 130, 56, 149));

                        cs.setPlotAreaBackgroundColor(Color.argb(255, 130, 56, 149));

And then i set the chart to gradient fill and the fill color.

                        lineSeries.getStyle().setFillStyle(FillStyle.GRADIENT);

                        lineSeries.getStyle().setAreaColorGradient(Color.argb(128, 110, 46, 99));

However, the gradient color always shows a lighter purple color. My question is: Could i set the gradient color to darker purple? 

Regards,

Victor


#5

Hi Victor,

Yes that’s absolutely right (about the second series with the imaginary data).

With regards to the gradient fill colours, you’ll want to call both setAreaColor() and setAreaColorGradient() on the line series. Use setAreaColor() for the colour of the fill at the top and setAreaColorGradient() for the colour of the fill at the bottom. With the fill style set to GRADIENT, the top colour will blend into the bottom colour. You may want the bottom colour (i.e. setAreaColorGradient()) to be set to TRANSPARENT.

Hope that helps!

Patrick