Dual scale in one shinobi chart


#1

Hi, 

I want to create a two y axis scale in one shinobi chart, like the picture below. One y axis shows mmHg, the other shows heart rate, and the scale of these two is different. May i know if Android Shinobi support this feature?

Regards,

Victor


#2

Hello Victor,

Thanks for getting in touch!

ShinobiCharts for Android Premium does support multiple y axes with a LineSeries attached to each, so it will be possible to create a chart which looks similar to that in your screen shot.

If you wish to create a chart using ShinobiCharts for Android which looks exactly like your screen shot, there will be a little more work to do. You will need to make use of Annotations (another premium feature) and some custom Views to achieve some of the labelling and shading which we see in your screen shot. For example to produce the heart shaped point symbols you would need to add a custom Annotation for each data point.

I hope you have found this information useful. If you need any further assistance please get back in touch.

Thanks,

Kai.


#3

Hi Kai,

I really need to add the dual y axes to the Shinobi Chart. I have read the Annotations user guide. However, i still have no idea what to do. Please is there any user guide on this?

Also, the custom view annotations:

        Annotation logoAnnotation = annotationsManager.addViewAnnotation(view, xValue, yValue, shinobiChart.getXAxis(), shinobiChart.getYAxis());

I cannot add custom view to each data point, there is an error when addViewAnnotation() is called multiple times:

“java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child’s parent first.”

How do i add custom view to each data point?

Regards,

Victor


#4

Hi Victor,

To add a second Y axis, simply call shinobiChart.addYAxis. If you want it to be on the right hand side of the chart you need to use the setPosition method . Then when adding your series to the chart, use the shinobiChart.addSeries method that takes a series and two axes - by calling this method you will associate the given series with the two given axes. See th following for further details:

In terms of Annotations, there is the How-To: Add Annotations to a Chart guide in the User Guide with the accompanying sample project (all in the download bundle). There is also a whole section on Annotations in the Control Overview section of the User Guide, as well as the API docs.

A View in Android can only have one parent - you will have to create a separate View object for every data point in order to add it to a custom view annotation.

Hope that helps!

Patrick


#5

Hi Patrick,

Thank you for your reply. I have successful applied the code in How-To: Add Annotations to a Chart guide to my App, and read the Control Overview section of the User Guide. 

I modify the code, now there is no error, but i can’t see the annotations in each data points. How is the code snippet. Please kindly give your advice.

        AnnotationsManager annotationsManager = shinobiChart.getAnnotationsManager();

        // Go through each entry in the map…

        for (Entry<String, Data<Date, Double>> entry : releaseInfo.entrySet()) {

            ImageView androidLogo = new ImageView(getActivity());

            androidLogo.setImageResource(R.drawable.logo_small);

            androidLogo.setLayoutParams(new LayoutParams(0, 0));

            String releaseName = entry.getKey();

            Date releaseDate = entry.getValue().getX();

            Double closingPrice = entry.getValue().getY();

            annotationsManager._ addViewAnnotation _(

                androidLogo, releaseDate, closingPrice, shinobiChart.getXAxis(), shinobiChart.getYAxis());

        }

My purpose of annotation is to show the heart symbol in each data point.

heart symbol

Regards,

Victor


#6

Hi Victor,

It looks like the problem here is that you’re setting a LayoutParams with 0 width and 0 height on each ImageView. The only time you’ll want to set these to 0 is if you’re going to go on to set an X and Y range on the Annotation so that it scales as you pan and zoom.

In your case, I’d imagine you’ll want the heart symbols to stay the same size no matter how much you zoom in or out. As such, try setting the width and height to WRAP_CONTENT to make the ImageViews the size of the image, or to specific values if you want to resize them., e.g.

androidLogo.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

Kind regards,

Patrick


#7

Hi Patrick,

Thank you!! Now I can show the heart symbols in Shinobi chart. Can i also show the heart symbol in the legend, as highlighted in the attached picture? (That heart symbol in legend is copied over manually)

Regards,

Victor


#8

Hi Victor,

Glad to hear you got the annotations showing!

At present it isn’t possible to customise the symbol for the series in the Legend - advanced customisation of the Legend and its items is definitely a feature on our roadmap. I’m not able to give you a timescale for this at the moment but, as I’m sure I’ve mentioned before, we prioritse development based on customer demand so I’ll certainly make a note your request.

Kind regards,

Patrick


#9

Hi Patrick,

Thank you for you reply. On the dual axis in one chart, i am able to add the second axis, but it comes with a big problem, the annotations are off the line. Please see the attach screenshot. The code below

      shinobiChart.addSeries(series3, xAxis, yAxis2);

causes the annotaton to fall of the red color “Pulse line”. Would be there a solution for this problem?

Regards,

Victor


#10

Hi Victor,

It looks as though you’re associating the (heart) annotations with the Y axis on the left side whereas the corresponding line series (Pulse) is associated with the Y axis on the right side. It’s just a case of specifying the correct axes when using the annotationsManager.addViewAnnotation method.

Hope that helps!

Patrick


#11

Hi Patrick,

I missed out on that method’s y axis. Thank for pointing out. Now it is working.

Regards,

Victor