katma11 Posted December 12, 2018 Share Posted December 12, 2018 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 More sharing options...
Tirupathi Mangalarapu Posted December 12, 2018 Share Posted December 12, 2018 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 Link to comment Share on other sites More sharing options...
katma11 Posted December 12, 2018 Author Share Posted December 12, 2018 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now