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
2 Answers:
Posted on December 12, 2018 at 8:23am
Hello There,
Can you please take a look at this link and see if that helps : https://jsfiddle.net/BlackLabel/u3bb6oah/
Posted on December 12, 2018 at 10:23am
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>
