Jump to content
Changes to the Jaspersoft community edition download ×

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


katma11

Recommended Posts

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

 

Link to comment
Share on other sites

  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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);        }); }[/code]

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[/code]

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 allselect 3 as question,             '3'    as ord,             'Disagree' as "Selection_value",             6 as "ResponseCount"union allselect 4 as question,             '4'    as ord,             'Strongly Disagree' as "Selection_value",             8 as "ResponseCount"union allselect 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>[/code]
Link to comment
Share on other sites

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...