How can I order my HTML5 Chart Bars by their total value?

Jaspersoft Community 'Read-Only' as of July 8, 2022

Transition to New TIBCO Community Just Weeks Away

You can still search, review wiki content, and review discussions in read-only mode. Please email community@tibco.com with questions or issues requiring TIBCO review or response.

Hello all,

I have tried everything but I am unable to sort my bars in my HTML5 chart by total value.

For example, I want to have 4 bars but I want it to show first the bar with the highest value etc.

The sorting in the HTML5 chart is based on the Categories when I want it to sort by the measurement. Is there anyway?

Regards

 

katma11's picture
70
Joined: Apr 19 2017 - 9:44am
Last seen: 3 years 5 months ago

2 Answers:

Hello There,

Can you please take a look at this link and see if that helps : https://jsfiddle.net/BlackLabel/u3bb6oah/

Ref: https://forum.highcharts.com/viewtopic.php?t=40663

JRS-SE's picture
3996
Joined: Oct 30 2017 - 12:56pm
Last seen: 3 days 8 hours ago

Hi Tiru,

Thank you for your reply. This is indeed what I am looking for.

I am trying to add the fucntion in my jrxml file but I get funny errors.

This is the fucntion I need to use:

function() {
        var points = this.series[0].points,
          chart = this,
          newPoints = [];
 
        Highcharts.each(points, function(point, i) {
          point.update({
            name: categories[i]
          }, false);
          newPoints.push({
            x: point.x,
            y: point.y,
            name: point.name
          });
        });
        chart.redraw();
 
        // Sorting max - min
        $('#sort3').on('click', function() {
          newPoints.sort(function(a, b) {
            return b.y - a.y
          });
 
          Highcharts.each(newPoints, function(el, i) {
            el.x = i;
          });
 
          chart.series[0].setData(newPoints, true, false, false);
        }); }

I get errors about the function() but I have added the property in Studio to enable the HTML5 functions to run:

com.jaspersoft.jasperreports.highcharts.function.properties.allowed=true

Below my jrxml code:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Jaspersoft Studio version 6.4.2.final -->
<!-- using JasperReports Library version 6.2.1  -->
 
<!-- 2018-12-12T19:21:54 -->
 
<jasperReport xmlns="http://jasperreports.sourceforge.net/jasperreports"
              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
              xsi:schemaLocation="http://jasperreports.sourceforge.net/jasperreports http://jasperreports.sourceforge.net/xsd/jasperreport.xsd"
              name="testtoday"
              pageWidth="595" pageHeight="842" columnWidth="555"
              leftMargin="20" rightMargin="20" topMargin="20" bottomMargin="20"
              uuid="4f431dff-dcb8-4cb6-b9c2-fd4aa2f91fcc">
 
    <property name="com.jaspersoft.studio.data.defaultdataadapter" value="mysql"/>
    <queryString language="SQL">
        <![CDATA[
select 1 as question,
 
             '1'    as ord,
 
             'Strongly Agree' as "Selection_value",
 
             5 as "ResponseCount"
 
union all
 
select 3 as question,
 
             '3'    as ord,
 
             'Disagree' as "Selection_value",
 
             6 as "ResponseCount"
 
union all
 
select 4 as question,
 
             '4'    as ord,
 
             'Strongly Disagree' as "Selection_value",
 
             8 as "ResponseCount"
 
union all
 
select 2 as question,
 
             '2'    as ord,
 
             'Agree' as "Selection_value",
 
             9 as "ResponseCount"
    ]]>
    </queryString>
 
    <field name="Question" class="java.lang.Integer"/>
    <field name="ord" class="java.lang.String"/>
    <field name="Selection_value" class="java.lang.String"/>
    <field name="ResponseCount" class="java.lang.Integer"/>
    <sortField name="ord"/>
 
    <summary>
        <band height="440">
            <componentElement>
                <reportElement x="20" y="20" width="520" height="420"
                               uuid="c2655f83-214c-488e-9232-ab5b6217333e">
                    <property name="local_mesure_unitwidth" value="pixel"/>
                    <property name="com.jaspersoft.studio.unit.width" value="px"/>
                    <property name="local_mesure_unitx" value="pixel"/>
                    <property name="com.jaspersoft.studio.unit.x" value="px"/>
                </reportElement>
 
                <hc:chart xmlns:hc="http://jaspersoft.com/highcharts"
                          xsi:schemaLocation="http://jaspersoft.com/highcharts http://jaspersoft.com/schema/highcharts.xsd"
                          type="Column" evaluationTime="Report">
                    <hc:chartSetting name="default">
                        <hc:chartProperty name="categories.dataLabels.formatter">
                            <hc:propertyExpression>
                                <![CDATA["function () {return this.value.substr(3);}"]]>
                            </hc:propertyExpression>
                        </hc:chartProperty>
 
                        <hc:chartProperty name="colors">
                            <hc:propertyExpression>
                                <![CDATA[java.util.Arrays.asList("#89A54E","#4572A7","#AA4643","#80699B","#3D96AE","#DB843D","#92A8CD","#A47D7C","#B5CA92")]]>
                            </hc:propertyExpression>
                        </hc:chartProperty>
 
                        <hc:chartProperty name="credits.enabled" value="false"/>
                        <hc:chartProperty name="credits.href" value=""/>
                        <hc:chartProperty name="credits.text" value=""/>
 
                        <hc:chartProperty name="legend.enabled">
                            <hc:propertyExpression>
                                <![CDATA[Boolean.TRUE]]>
                            </hc:propertyExpression>
                        </hc:chartProperty>
 
                        <hc:chartProperty name="legend.labelFormatter">
                            <hc:propertyExpression>
                                <![CDATA["function () {return this.name.substr(3);}"]]>
                            </hc:propertyExpression>
                        </hc:chartProperty>
 
                        <hc:chartProperty name="net.sf.jasperreports.export.xls.auto.fit.column"
                                          value="true"/>
                        <hc:chartProperty name="net.sf.jasperreports.export.xls.ignore.graphics"
                                          value="false"/>
 
                        <hc:chartProperty name="plotOptions.series.dataLabels.enabled">
                            <hc:propertyExpression>
                                <![CDATA[Boolean.TRUE]]>
                            </hc:propertyExpression>
                        </hc:chartProperty>
 
                        <hc:chartProperty name="title.style.fontSize">
                            <hc:propertyExpression>
                                <![CDATA["14px"]]>
                            </hc:propertyExpression>
                        </hc:chartProperty>
 
                        <hc:chartProperty name="title.text">
                            <hc:propertyExpression>
                                <![CDATA[""]]>
                            </hc:propertyExpression>
                        </hc:chartProperty>
 
                        <hc:chartProperty name="tooltip.formatter">
                            <hc:propertyExpression>
                                <![CDATA["function () {return this.series.name.substr(3);}"]]>
                            </hc:propertyExpression>
                        </hc:chartProperty>
 
                        <hc:chartProperty name="xAxis.labels.formatter">
                            <hc:propertyExpression>
                                <![CDATA["function () { var s = this.value; return s.substr(1);}"]]>
                            </hc:propertyExpression>
                        </hc:chartProperty>
 
                        <hc:chartProperty name="yAxis.title.text" value=""/>
                        <hc:chartProperty name="chart.events.load">
                            <hc:propertyExpression>
                                <![CDATA[function() {var points = this.series[0].points,chart = this,newPoints = []; Highcharts.each(points, function(point, i) {point.update({name: categories[i]}, false);newPoints.push({x: point.x,y: point.y,  name: point.name});});chart.redraw();$('#sort3').on('click', function() { newPoints.sort(function(a, b) {return b.y - a.y});Highcharts.each(newPoints, function(el, i) {el.x = i;});chart.series[0].setData(newPoints, true, false, false);}); }]]>
                            </hc:propertyExpression>
                        </hc:chartProperty>
 
                    </hc:chartSetting>
 
                    <multiAxisData>
                        <multiAxisDataset/>
 
                        <dataAxis axis="Rows">
                            <axisLevel name="Question">
                                <labelExpression>
                                    <![CDATA["LMDAgeBucket"]]>
                                </labelExpression>
 
                                <axisLevelBucket order="None"
                                                 class="java.lang.String">
                                    <bucketExpression>
                                        <![CDATA[$F{Question}]]>
                                    </bucketExpression>
                                </axisLevelBucket>
                            </axisLevel>
                        </dataAxis>
 
                        <dataAxis axis="Columns">
                            <axisLevel name="Selection">
                                <labelExpression>
                                    <![CDATA[]]>
                                </labelExpression>
 
                                <axisLevelBucket class="java.lang.String">
                                    <bucketExpression>
                                        <![CDATA[$F{ord}+" "+$F{Selection_value}]]>
                                    </bucketExpression>
                                </axisLevelBucket>
                            </axisLevel>
                        </dataAxis>
 
                        <multiAxisMeasure name="Responses"
                                          class="java.lang.Integer"
                                          calculation="Nothing">
                            <labelExpression>
                                <![CDATA[""]]>
                            </labelExpression>
                            <valueExpression>
                                <![CDATA[$F{ResponseCount}]]>
                            </valueExpression>
                        </multiAxisMeasure>
 
                    </multiAxisData>
                    <hc:series name="Responses"/>
                </hc:chart>
            </componentElement>
        </band>
    </summary>
</jasperReport>
katma11's picture
70
Joined: Apr 19 2017 - 9:44am
Last seen: 3 years 5 months ago
Feedback
randomness