Jump to content
We've recently updated our Privacy Statement, available here ×

HTML5 - Get Category ID from Chart to call Item in Array (AWS)


stegmann

Recommended Posts

Hello,

I have a HTML5-Barchart with 5 Categories and I want to add additional information in the tooltip using the tooltip formatter.

The additional information is stored in an array-variable (Type java.lang.String[]) and I can call the specific value by $V{variable1}[x] where x stands for the Item-position in the array.

Now I want to add a tooltip showing the corresponding value from the array. for example. When I mousover on the bar in category 1 it should return $V{variable1}[1] and When mousover on 3 it should return $V{variable1}[3]

How do I get the category number from HTML5 Charts to using this as a number to call the correct item in the array?

Does anyone has an idea? Would be really great!
Maybe there is another way to add addtional information in the tooltip?

Thanks,
Philipp

 

Link to comment
Share on other sites

  • 2 weeks later...
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

I think I understand what you are looking for but correcty me if I'm off here.

Have you tried setting bucket properties? Similar to what you use for creating Hyperlinks (see: http://community.jaspersoft.com/wiki/how-do-i-set-chart-hyperlinks-html5-charts).

If you post a sample JRXML with some sample data or using the Jasper Sample database I may be able to help you more

 

Link to comment
Share on other sites

My other post with attachment did not display here, so next try without attachment...:)

Hello,

this is a good idea.
I now created a new JRXML based on foodmart datasource with Month as Categories and Sales as Measures.
I want to include the "Quarter" information in the tooltip.

So i created:

<dataAxis axis="Rows">
                            <axisLevel name="month">
                                <labelExpression><![CDATA["month"]]></labelExpression>
                                <axisLevelBucket class="java.lang.Comparable">
                                    <bucketExpression><![CDATA[$F{month_of_year}]]></bucketExpression>
                                    <bucketProperty name="quarter"><![CDATA[$F{quarter}.toString()]]></bucketProperty>
                                </axisLevelBucket>
                            </axisLevel>
                        </dataAxis>

 

But how to integrate in tooltip?
The following did not work:

<hc:chartProperty name="tooltip.formatter">
                            <hc:propertyExpression><![CDATA["function() {return month.quarter ;}"]]></hc:propertyExpression>
</hc:chartProperty>
 

Any ideas?

Thanks a lot!

Philipp

Link to comment
Share on other sites

FINALLY I solved the problem:

 

1. You need to define a Bucket Property on category level. I created one with the name "quarter".

                        <dataAxis axis="Rows">
                            <axisLevel name="month">
                                <labelExpression><![CDATA["month"]]></labelExpression>
                                <axisLevelBucket class="java.lang.Comparable">
                                    <bucketExpression><![CDATA[$F{month_of_year}]]></bucketExpression>
                                    <bucketProperty name="quarter"><![CDATA[$F{quarter}]]></bucketProperty>
                                </axisLevelBucket>
                            </axisLevel>
                        </dataAxis>

 

2. In the Series where the value should be visible you need to create a SeriesItemProperty (NOT SeriesProperty)

                    <hc:series name="Sales">
                        <hc:contributor name="SeriesItemProperty">
                            <hc:contributorProperty name="quarter" valueType="Bucket" value="month.quarter"/>
                        </hc:contributor>
                    </hc:series>

 

3. Then you can call the property in the tooltip, using the tooltip.formatter Chart Property

                       <hc:chartProperty name="tooltip.formatter">
                            <hc:propertyExpression><![CDATA["function() {return this.point.quarter}"]]></hc:propertyExpression>
                        </hc:chartProperty>

 

And now it works ! :)

 

Link to comment
Share on other sites

  • 9 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...