We Keep Coding

Jasper report color issue with Highcharts's plotOptions.fillColor

I'm developing a report in Jaspersoft Studio 6.4 using custom visualization component and Highcharts.
Long story short, when doing a bubble chart or an area chart, plotOptions.fillColor -attribute does not work properly, but leaves the bubbles inside or stacked area chart's insides black. Black color usually means the color is not found, but the line of the bubble/lines in the area chart work as they should.
Here is the following Highcharts script for area chart:
define(['jquery_hc','hchart'], function ($, Highcharts) {
return function (instanceData) {
// Creating the chart
var config = {
chart: {
type: 'area',
plotBorderWidth: 1,
renderTo: instanceData.id,
width: instanceData.width,
height: instanceData.height,
marginBottom: 15,
marginLeft: 40,
marginRight: 5,
marginTop: 5
},
title: {
text: ""
},
colors: ['#927453', '#9b672c', '#b0771e', '#e66726', '#474747', '#949494', '#feb40b', '#bd9c31', '#e0b33a'],
xAxis: {
allowDecimals: false,
title: {enabled: false},
labels: {enabled: false},
visible: false
},
legend: {
itemStyle: {"fontSize": 6},
symbolPadding: 4,
symbolHeight: 4,
symbolWidth: 4,
y: 20
},
credits: {enabled: false},
yAxis: {
title: {enabled: false},
labels: {
style: {"fontSize": 6},
formatter: function () {
return this.value;
},
},
tickInterval: 2
},
plotOptions: {
area: {
stacking: 'percent',
animation: false,
marker: {
enabled: false
},
lineWidth: 1
}
},
series: [{
name: 'that',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'it',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'with',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'who',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'how',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'this',
data: [82, 72, 62, 46, 113, 320, 443]
}, {
name: 'that',
data: [11, 12, 14, 16, 13, 55, 113]
}, {
name: 'those',
data: [7, 1, 3, 11, 15, 37, 49]
}, {
name: 'these',
data: [108, 301, 504, 1056, 3039, 8018, 10201]
}, {
name: 'this too',
data: [10, 30, 50, 105, 303, 801, 1020]
}]
}
new Highcharts.Chart(config);
}
});
And the build.js:
({
baseUrl: '',
paths: {
jquery_hc: "../jquery-3.2.1",
hchart: "../highcharts",
'areaChart': 'areaChart'
},
shim: {
'hchart' : {
deps: ["jquery_hc"],
exports: 'Highcharts'
}
},
name: 'areaChart',
out: "areaChart.min.js"
})
The highchart is using newest highchart.js and jquery-3.2.1.js.
Few things I've tried to add the color:
Using theme to put the charts main color
Setting plotOptions.fillColor: null
Setting plotOptions.fillColor: '#927453'
Setting plotOptions to "series" from "area"
Setting plotOptions.color: [the same colors]
and maybe few other things based on the API reference from Highcharts.
One thing on the other hand is working, if I put the plotOptions.fillColor: '#ffffff', the color of all changes, which means the issue is mostly about matching one color per dataset.
One huge issue is, that this is not reproducible in JSFiddle (JSFiddle).
So, Jasper Report is possibly to blame, but I'm starting to be out of ideas. I've found one issue, which could be related to this: (https://
community.jaspersoft.com/jaspersoft-studio/issues/8641) , but I haven't been able to do much about it with this setup. My web application is using jasper engine to produce reports and the problem is also present in there.
People of StackOverflow, employees of Highcharts and employees of Jaspersoft, combine your knowledge and help me to solve this issue!
Lastly, a picture of the Jasper Report studio of the generated report:

After looking to code, I found report is properly working when we see it in HTML format but pdf format is not working properly. As we kow CVC component utilises phantmjs in order to download report then I tried to search issue related to phantomjs and highcharts but unable to find anything.
Then I tried looked plotOption property and added following plotOption to your code.
plotOptions: {
series: {
animation: false,
stacking: 'percent',
lineWidth: 1,
fillColor: null,
fillOpacity: 1, // this is default to 0.75
marker: {
enabled: false
}
}
},
Then it starts showing the result in PDF format as well. So the main culprit is fillOpacity If you set it to 1 then your problem will be resolved.
Note: If you use fillOpacity other than 1 then it is not showing result.
You can also specify color, fillcolor and opacity as shown below.
series: [{
name: 'that',
data: [502, 635, 809, 947, 1402, 3634, 5268],
fillColor:'red', // use this color light as compared to color
fillOpacity: 1,
color: 'white' // use this color dark as compared to fillcolor
},
...
...
...
,{
name: 'this too',
data: [10, 30, 50, 105, 303, 801, 1020],
fillColor:'#00ff00',
fillOpacity: 1,
color: 'orange'
}]
You can download code from here.

Highcharts showing time instead of date

$(function () {
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Test Progress'
},
xAxis: {
title: {
text: 'Date'
},
type: "datetime"
},
yAxis: {
title: {
text: 'Grade'
}
},
credits: { enabled: false },
series: [{
data: [[1331028000000, 5], [1331031600000, 6], [1331035200000, 4]]
}]
});
});
By following this thread, http://stackoverflow.com/questions/9548326/what-format-does-the-highcharts-js-library-accept-for-dates
it says that i can input the dates in the above way inside data but it shows time instead of date.
Also i tried the first method and still gives me time. How can i display dates?
Also i am trying to get the dates from records and display them there, in what format do i need to convert them to properly show them?

For those wondering here is the query i have come up with
Test.where("user_id = ?", 25).order('created_at DESC').select(:grade,:created_at).map { |g| [ g.created_at.to_i * 1000, g.grade.to_i ] }.inspect
i wrapped this query in a method and called the method in view
series: [{
data: <%= grades %>
}]
this creates this line of code
data: [[1454777030000, 25], [1454598308000, 50], [1454598191000, 75], [1454163373000, 100], [1454163332000, 100], [1454163177000, 100], [1454163000000, 0], [1454096412000, 50], [1454096220000, 50], [1454095875000, 0], [1454095853000, 50], [1454082249000, 22], [1454081128000, 100], [1453037445000, 100]]
which seems to work with highcharts

Highcharts - kind of hack for stick plot timeseries

Hi all from a highchart developer Pawel-fus on Highcharts official forum, I came to know that highchart doesn't support stick plot, and similar effects can be achieved using linked series.
I have u and v components which I want to show as stick using highcharts, So theoretically what I know is
A stick plot is a plot on the u-v plane. Suppose you have a time
series of a vector (u(t), v(t)). Then, you plot line segments
from (ct, 0) to (ct+u(t), v(t))
on the u-v plane for all values of t, where c is an arbitrary
constant. Each line segment represents the vector (u(t), v(t))
but its origin is shifted as (ct, 0).
So, the vertical axis is v and the horizontal axis is u.
But, the horizontal axis is "labeled" with time t, just for
convenience, to represent the shift of the origin (ct,0).
from Pawel-Fus help, I could able to implement theory like this, here x axis is numeric that is 0 - 3, checkout Fiddle - working theory
<script src="jquery-1.11.0.min.js"></script>
<script src="highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>
<script>
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
colors: ['blue'],
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [{
name: 'main',
id: 'main',
data: [
[0, 0],
[(-3.969 +0), -1.001]
]
}, {
name: 'main',
linkedTo: 'main',
data: [
[1, 0],
[(-4.578 + 1), 0.596]
]
}, {
name: 'main',
linkedTo: 'main',
data: [
[2, 0],
[(1.593 + 2), 0.484]
]
}, {
name: 'main',
linkedTo: 'main',
data: [
[3, 0],
[(-1.622 + 3), 1.580]
]
}]
});
});
</script>
but my ultimate aim is to make time series plot, so I tried like this, here I replaced with date, unfortunately I didn't get result like above checkout Bad Fiddle
<script src="jquery-1.11.0.min.js"></script>
<script src="highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>
<script>
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
colors: ['blue'],
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats : {
year: '%e %b %Y',
}
},
series: [{
name: 'main',
id: 'main',
data: [
[Date.UTC(1982, 1, 16), 0],
[(-3.969 + Date.UTC(1982, 1, 16)), -1.001]
]
}, {
name: 'main',
linkedTo: 'main',
data: [
[Date.UTC(1982, 2, 16), 0],
[(-4.578 + Date.UTC(1982, 2, 16)), 0.596]
]
}, {
name: 'main',
linkedTo: 'main',
data: [
[Date.UTC(1982, 3, 16), 0],
[(1.593 + Date.UTC(1982, 3, 16)), 0.484]
]
}, {
name: 'main',
linkedTo: 'main',
data: [
[Date.UTC(1982, 4, 16), 0],
[(-1.622 + Date.UTC(1982, 4, 16)), 1.580]
]
}]
});
});
</script>
So what I am doing wrong with time series plot ? whether timeseries can be done like first working script ? and I want to add arrow for each stick on top
Someone please help me...
Please shout at me, if you need more clarification...
Thanks..

Your dates are too close to get any sort of slope to your line. Date.UTC returns milliseconds since 1/1/1970, so subtracting off only 3 or 4 milliseconds, will just produce vertical lines. This:
data: [
[Date.UTC(1982, 1, 16), 0],
[(-3.969 + Date.UTC(1982, 1, 16)), -1.001]
]
is equal to:
data: [
[382665600000, 0],
[382665599996.031, -1.001]
]

High Chart - columnrange Type depending on months

Hi every one I am using Highchart of columnrange type, i got chart from
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/columnrange/ and modified it according to my need , now i need months name in the x-axis and y-axis values are fixed . Currently i am not able to change the x-axis numbers to months.
My script is as :
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Employee Bill Pending Detail'
},
subtitle: {
text: 'Month Wise'
},
xAxis: {
categories: ['Bank Bill Pending', 'Clam Pending']
},
yAxis: {
title: {
text: 'Session (2013-14)'
}
},
tooltip: {
valueSuffix: ''
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y ;
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Months',
data: [
[1, 4], // Here the [1,4] denotes months between 'Jan' & 'Apr'.
[2, 8] // Here the [2,8] denotes months between 'Feb' & 'Aug'.
]
}]
});
});
Any help will be highly appreciable.

This is actually really easy. Relevant API documenation:
dateFormat()
yAxis.type
You need to set your data up like this (or use explicit js timestamp):
series: [{
name: 'Months',
data: [
[Date.UTC(2013, 0, 1), Date.UTC(2013, 3, 1)], // Here the [1,4] denotes months between 'Jan' & 'Apr'.
[Date.UTC(2013, 2, 1), Date.UTC(2013, 7, 1)] // Here the [2,8] denotes months between 'Feb' & 'Aug'.
]
}]
Note that Data.UTC() is zero based so that January is '0'. The last element in that list is the date. Since your data is just by month I made it '1'. You can have whatever you want here as the display on the dataLabel and the tooltip is handled with the dateFormat.
Example jsFiddle.

Is there a way to enter Highchart series data without eval?

I have been working on getting data into a highchart graph with much difficulty.
Eventually I had to go with using eval(data).
Is there a better way to do this?
JSFiddle Example
$(function () {
var test = "[[Date.UTC(2013, 4, 08), 45.95],[Date.UTC(2013, 5, 28), 19.95]]";
$('#container').highcharts({
chart: {
},
xAxis: {
type: 'datetime'
},
series: [{
data: eval(test)
}]
});
});
UPDATE 1
My actual objective is to pass a JSON object into a function (as shown below) then get the required strings and pass them to the series input.
The following is still not working.
function showPriceChart(priceData) {
var json = jQuery.parseJSON(priceData);
var pricePrices = [ json.pricePrices ];
// This works if I use eval below
// var pricePrices = '['+json.pricePrices+']';
/// Other chart config goes here
series: [{
name: 'Retailer Price',
data: pricePrices
}, {
name: 'RRP',
data: rrpPrices
}]
});
}
Here is the JSON object from php using print_r():
{"pricePrices":"[Date.UTC(2013, 4, 8), 67],[Date.UTC(2013, 5, 28), 29]","salePrices":"[Date.UTC(2013, 4, 8), ],[Date.UTC(2013, 5, 28), ]","rrpPrices":"[Date.UTC(2013, 4, 8), 67],[Date.UTC(2013, 5, 28), 67]"}

you were really close from your goal.
The following is working :
(http://jsfiddle.net/G6jrU/3/)
$(function () {
var test =[ [ Date.UTC(2013, 4, 08), 45.95 ],
[ Date.UTC(2013, 5, 28), 19.95 ] ];
$('#container').highcharts({
chart: {
},
xAxis: {
type: 'datetime'
},
series: [{ data : test }]
});
});
Rq : You might use JSON to serialize/unserialize data if you need to.

The problem is that you are using Date.UTC() function, so you need to use eval. How about passing numbers(timestamps in milliseconds) instead of that functions? So, your JSON should look this way:
{
"pricePrices":[1367971200000, 67],[1372377600000, 29],
"salePrices":[1367971200000, ],[1372377600000, ], //where are values ?!
"rrpPrices":[1367971200000, 67],[1372377600000, 67] //without extra '"'!!
}
Also, there is some missing values for second series, where are they?