HTML5 Line Chart - Multi-colors on point level

[kalyan.kkannan]

Need to generate Line chart(HTML5) using Jasper with multiple color on data points. On inputting multi-color to Jasper its using the first occuring color and painting to the rest of data points.  I am able to achieve multi-color LIne chart using plain Highcharts ->  http://jsfiddle.net/Javaduke/9xgrsmk3/ .  When doing with Jasper i am not able to achieve the same. Kindly help me with suitable way to do the same.

 

Enclosed my chart code below.

                <hc:chart xmlns:hc="http://jaspersoft.com/highcharts" xsi:schemaLocation="http://jaspersoft.com/highcharts http://jaspersoft.com/schema/highcharts.xsd" type="Line">
                    <hc:chartSetting name="default">
                        <hc:chartProperty name="chart.animation">
                            <hc:propertyExpression><![CDATA[boolean.FALSE]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="chart.showAxes">
                            <hc:propertyExpression><![CDATA[boolean.TRUE]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="chart.type" value="line"/>
                        <hc:chartProperty name="credits.enabled">
                            <hc:propertyExpression><![CDATA[false]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="credits.href">
                            <hc:propertyExpression><![CDATA[""]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="credits.text">
                            <hc:propertyExpression><![CDATA[""]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="legend.align" value="bottom"/>
                        <hc:chartProperty name="legend.enabled" value="true"/>
                        <hc:chartProperty name="plotOptions.area.marker.enabled" value="false"/>
                        <hc:chartProperty name="plotOptions.area.shadow" value="false"/>
                        <hc:chartProperty name="plotOptions.series.marker.lineWidth" value="1"/>
                        <hc:chartProperty name="plotOptions.series.marker.radius" value="3"/>
                        <hc:chartProperty name="plotOptions.series.marker.symbol" value="circle"/>
                        <hc:chartProperty name="title.text">
                            <hc:propertyExpression><![CDATA[""]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="tooltip.animation">
                            <hc:propertyExpression><![CDATA[false]]></hc:propertyExpression>
                        </hc:chartProperty>
                        <hc:chartProperty name="tooltip.crosshairs" value="true"/>
                        <hc:chartProperty name="tooltip.enabled" value="false"/>
                        <hc:chartProperty name="tooltip.shared" value="true"/>
                        <hc:chartProperty name="tooltip.style.visibility" value="hidden"/>
                        <hc:chartProperty name="xAxis.dateTimeLabelFormats.day" value="%m/%d/%y"/>
                        <hc:chartProperty name="xAxis.dateTimeLabelFormats.hour" value="%H:%M"/>
                        <hc:chartProperty name="xAxis.dateTimeLabelFormats.minute" value="%H:%M"/>
                        <hc:chartProperty name="xAxis.dateTimeLabelFormats.month" value="%m/%d/%y"/>
                        <hc:chartProperty name="xAxis.dateTimeLabelFormats.second" value="%H:%M:%S"/>
                        <hc:chartProperty name="xAxis.dateTimeLabelFormats.week" value="%m/%d/%y"/>
                        <hc:chartProperty name="xAxis.dateTimeLabelFormats.year" value="%m/%d/%y"/>
                        <hc:chartProperty name="xAxis.endOnTick" value="true"/>
                        <hc:chartProperty name="xAxis.startOnTick" value="true"/>
                        <hc:chartProperty name="xAxis.type" value="datetime"/>
                        <hc:chartProperty name="yAxis.title.text">
                            <hc:propertyExpression><![CDATA[""]]></hc:propertyExpression>
                        </hc:chartProperty>
                    </hc:chartSetting>
                    <multiAxisData>
                        <multiAxisDataset/>
                        <dataAxis axis="Rows">
                            <axisLevel name="Category">
                                <labelExpression><![CDATA["Level Label expression"]]></labelExpression>
                                <axisLevelBucket order="None" class="java.util.Date">
                                    <bucketExpression><![CDATA[new Date(Long.parseLong($F{date}))]]></bucketExpression>
                                </axisLevelBucket>
                            </axisLevel>
                        </dataAxis>
                        <dataAxis axis="Columns">
                            <axisLevel name="Portfolio">
                                <labelExpression><![CDATA[]]></labelExpression>
                                <axisLevelBucket order="None" class="java.lang.String">
                                    <bucketExpression><![CDATA[$F{portName}]]></bucketExpression>
                                    <bucketProperty name="fillOpacity"><![CDATA[0.15]]></bucketProperty>
                                    <bucketProperty name="lineColor"><![CDATA["#1a4ca0"]]></bucketProperty>
                                    <bucketProperty name="marker.fillColor"><![CDATA[$F{lineColor}]]></bucketProperty>
                                    <bucketProperty name="name"><![CDATA[$F{portName} + " : " + $F{lineColor}]]></bucketProperty>
                                    <bucketProperty name="type"><![CDATA["area"]]></bucketProperty>
                                </axisLevelBucket>
                            </axisLevel>
                            <axisLevel name="Investment">
                                <labelExpression><![CDATA[]]></labelExpression>
                                <axisLevelBucket order="None" class="java.lang.String">
                                    <bucketExpression><![CDATA[$F{invstName}]]></bucketExpression>
                                    <bucketProperty name="dashStyle"><![CDATA["longDash"]]></bucketProperty>
                                    <bucketProperty name="lineColor"><![CDATA["#000000"]]></bucketProperty>
                                </axisLevelBucket>
                            </axisLevel>
                            <axisLevel name="Benchmark1">
                                <labelExpression><![CDATA[]]></labelExpression>
                                <axisLevelBucket order="None" class="java.lang.String">
                                    <bucketExpression><![CDATA[$F{benchName}]]></bucketExpression>
                                    <bucketProperty name="lineColor"><![CDATA["#eaaa33"]]></bucketProperty>
                                </axisLevelBucket>
                            </axisLevel>
                        </dataAxis>
                        <multiAxisMeasure name="PortfolioValue" class="java.lang.Integer" calculation="Nothing">
                            <labelExpression><![CDATA[$F{portName}+" : "+$F{lineColor}]]></labelExpression>
                            <valueExpression><![CDATA[new Integer($F{portValue})]]></valueExpression>
                        </multiAxisMeasure>
                    </multiAxisData>
                    <hc:series name="PortfolioValue">
                        <hc:contributor name="SeriesProperty">
                            <hc:contributorProperty name="type" valueType="Bucket" value="Portfolio.type"/>
                            <hc:contributorProperty name="fillOpacity" valueType="Bucket" value="Portfolio.fillOpacity"/>
                            <hc:contributorProperty name="name" valueType="Bucket" value="Portfolio.name"/>
                            <hc:contributorProperty name="lineColor" valueType="Bucket" value="Portfolio.lineColor"/>
                            <hc:contributorProperty name="marker.fillColor" valueType="Bucket" value="Portfolio.marker.fillColor"/>
                        </hc:contributor>
                    </hc:series>
                </hc:chart>