Highchart is not showing in heroku, but works in local environment - ruby-on-rails

I am using ember-highcharts in my app. I tested in my localhost and it is working fine, the graphic is showing in the screen.
I deployed my application in heroku, and try to show the graphic but the error below appears:
Uncaught TypeError: Cannot read property 'parentGroup' of undefined
at object.setState (highcharts.src.js:33606)
at SVGGElement. (highcharts.src.js:33080)
Here is my code:
{{#if question.chartData}}
{{high-charts content=question.chartData chartOptions=chartOptions}}
{{else}}
<div class="modal__warning">Dados insuficientes</div>
{{/if}}
chartOptions: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: null
},
tooltip: {
pointFormat: '<b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
colors: [
'#60E0A1',
'#F19692',
'#d5d5d5',
'#68599D',
'#A69BC5'
],
dataLabels: {
enabled: false
},
size: '100%',
showInLegend: true,
startAngle: -90,
endAngle: 90,
center: ['50%', '100%']
}
},
yAxis: {
title: {
text: null
}
}
}
Does anyone know what the problem could be? Just remember that in my local machine is working fine!
Thanks in advance :)

I've discovered the issue. What happened is that the data that I was sending to Highcharts was using an incorrect format.
I am plotting a pie chart, and the data should be in the format below:
[ ["test", 10.0], ["test2", 85.0], ["test3", 5.0] ]
And I was sending the data like this:
{ {"test", 10.0}, {"test2", 85.0}, {"test3", 5.0} }
For some reason this caused the problem mentioned.

Related

HighMap data label is shown rotated

I tried to display some map results in JustPy, but HighMap data labels in JustPy show as rotated, but only the label is roated not the map itself.
import justpy as jp
my_chart_def = """
{
chart: {
map: 'custom/europe',
borderWidth: 1
},
title: {
text: 'Nordic countries'
},
subtitle: {
text: 'Demo of drawing all areas in the map, only highlighting partial data'
},
legend: {
enabled: false
},
series: [{
name: 'Country',
data: [
['is', 1],
['no', 1],
['se', 1],
['dk', 1],
['fi', 1]
],
dataLabels: {
enabled: true,
color: '#FFFFFF'
},
}]
}
"""
def chart_test():
wp = jp.WebPage()
wp.head_html = """
<script src="https://code.highcharts.com/maps/9.2.2/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/europe.js"></script>
"""
my_chart = jp.HighCharts(a=wp, classes='m-2 p-2 border w-1/2 h-screen', options=my_chart_def)
my_chart.options.chart.type = 'map'
my_chart.options.series[0].name = 'Test chart'
my_chart.options.title.text = 'Data'
return wp
jp.justpy(chart_test)
This is what I got:
If I rotate the map 90 degrees, this is what I see, and the label seems aligned
I've reproduced your example in the editor, and everything seems to be correct https://jsfiddle.net/BlackLabel/6g92m7br/, so the issue occurs from the justpy side.
However, since 9.3.0 Highcharts Maps has improved geometry https://www.highcharts.com/blog/changelog/#highcharts-maps-v9.3.0, which could have affected another framework's behaviour. I would suggest reaching out JustPy developers directly.
As a workaround, you can try to play around with setting x, y dataLabels positions, e.g:
plotOptions: {
series: {
dataLabels: {
x: 15,
y: -50
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/bnejx2kc/
API Reference:
https://api.highcharts.com/highmaps/plotOptions.map.dataLabels.x
https://api.highcharts.com/highmaps/plotOptions.map.dataLabels.y

HighCharts node-export-server y-axis labels missing

We have setup our own HighCharts node-export-server as shown in the official documentation. We are able to get images back from the server, however when requesting a column chart the y-axis labels are missing. If we submit the same chart data to https://export.highcharts.com/ we get the correct image.
Here is the chart data as submitted (to both servers):
{
'chart': {
'type': 'column',
'width': 800,
'height': 500
},
'title': { 'text': '' },
'xAxis': { 'categories': ['Damage Code'], 'crosshair': true },
'yAxis': {
'min': 0,
'title': { 'text': 'Tire Life (Hours)' },
'plotLines': [{
'value': 800,
'color': '#929292',
'dashStyle': 'shortdash',
'width': 2
} ]
},
'colors': ['#ff0000', '#000000', '#787878', '#5eb749', '#2893d1', '#5ec7bd', '#f79226', '#ff7043', '#ee3124', '#a9a9a9', '#333333'],
'tooltip': { 'enabled': false },
'plotOptions': {
'series': {
'dataLabels': {
'align': 'center',
'color': '#282E32',
'enabled': true,
'format': '{point.label}'
}
},
'column': {
'pointPadding': 0.2,
'borderWidth': 0
}
},
'series': [{"name":"(111) Test Code Description 1","showInLegend":true,"data":[{"y":1000,"label":"111 10%"}]},{"name":"(222) Test Code Description 2","showInLegend":true,"data":[{"y":2000,"label":"222 20%"}]},{"name":"(1212) Test Code Description 12","showInLegend":true,"data":[{"y":1200,"label":"1212 120%"}]}]
}
And the image returned from the node-server:
I've checked out the GitHub (https://github.com/highcharts/node-export-server ) page and not much has happened there since we setup the node-server so there is nothing new to deploy from there.
Updated: Getting back to this I see the repository has some changes since I last checked. I've grabbed the latest code in the repository and re-published to my chart server. The issue continues, but I've got some additional information now.
If I set the yAxis rotation to 0 (zero) it shows. Any other rotation (270 is the default) results in the title showing as 'dots' as shown in the image above.
So this will show the title:
'yAxis': {
'min': 0,
'title': { 'text': 'Tire Life (Hours)', rotation: 0 },
This will not:
'yAxis': {
'min': 0,
'title': { 'text': 'Tire Life (Hours)', rotation: 270 },
I don't consider rotation zero a solution, but hopefully this helps to identify the issue.

Fetching all the Project Name for a Project Cumulative Flow Chart in Rally

I am generating a Project Cumulative Flow Chart, which is based on the Project name that I fetch using a "find," however I can't get it working.
Here is the Problem:
1) The "Find" in my code is just fetching one kind of project name, "FE," however, I have a lot of other Project name such as FE, BE, VisualRF, etc. I am not sure what's going on
2) I return this to "storeConfig" inside the chart and then I want try to give "Name" to the "stateFieldName." This is not working! I don't see any graph at all.
Here is the code.
_chart2: function() {
var projectName = this.getContext().getProject()._refObjectName;
console.log("========");
console.log(projectName); <<<<<<<<<< This always prints one name'FE' (My project name are FE, BE, etc)
this.chart = {
xtype: 'rallychart',
storeType: 'Rally.data.lookback.SnapshotStore',
storeConfig: this._getStoreForChart2(),
calculatorType: 'Rally.example.CFDCalculator',
calculatorConfig: {
stateFieldName: this.getContext().getProject()._refObjectName, <<<<< I think usage is not fetching name of all projects
stateFieldValues: ['FE','BE','VisualRF']
},
width: 1000,
height: 600,
chartConfig: this._getChart2Config()
};
this.chartContainer.add(this.chart);
},
_getStoreForChart2: function() {
var obj1 = {
find: {
_TypeHierarchy: { '$in' : [ 'Defect' ] },
Children: null,
_ProjectHierarchy: this.getContext().getProject().ObjectID,
_ValidFrom: {'$gt': Rally.util.DateTime.toIsoString(Rally.util.DateTime.add(new Date(), 'day', -30)) },
State: "Open",
},
fetch: ['Severity','Project','ObjectID','FormattedID'],
hydrate: ['Severity','Project','ObjectID','FormattedID'],
sort: {
_ValidFrom: 1
},
context: this.getContext().getDataContext(),
limit: Infinity,
val: this.Name,
};
return obj1;
},
Though this should not matter but here is the code for the high chart function I am calling above
_getChart2Config: function() {
console.log("starting chart config");
return {
chart: {
zoomType: 'xy'
},
title: {
text: 'Chart2'
},
xAxis: {
tickmarkPlacement: 'on',
tickInterval: 20,
title: {
text: 'Date'
}
},
yAxis: [
{
title: {
text: 'Count'
}
}
],
plotOptions: {
series: {
marker: {
enabled: false
}
},
area: {
stacking: 'normal'
}
}
};
},
Down below you can see 'FE' getting printed:
Thanks a lot!
Kay
stateFieldName is the field which is used to calculate the CFD- usually ScheduleState or a custom dropdown field like KanbanState that captures your process. The stateFieldValues should be the values of that field (Defined, In-Progress, Accepted, Completed, etc.) This doesn't deal with projects at all. Definitely remember to include that field in your hydrate and fetch as well.

Trying Highstock to convert very old graph application but no display

I am in the process of moving from a built in graph library to HighStock.
I have to comply to crasy implementations. So at the end I got this configuration :
$(function() {
chart = new Highcharts.StockChart({
chart : {
renderTo : 'div_#divid#'
},
rangeSelector : {
selected : 0,
buttons: [{
type: 'day',
count: 7,
text: '7j'
}, {
type: 'day',
count: 15,
text: '15j'
}, {
type: 'day',
count: 30,
text: '30j'
}, {
type: 'all',
text: 'Tous'
}]
},
series : [{
type : 'column',
name : 'valeur',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
Here is the fiddled version.
I don't get whats wrong with my data. (but I think I did correctly the conversion for the dates.)
[[1362355200000,672],[1362441600000,9764],[1362528000000,9839],[1362614400000,9906], [1362700800000,9973],[1362787200000,9906],[1362873600000,10592],[1362960000000,11236], [1363046400000,13233],[1363132800000,0],[1363219200000,0],[1363305600000,0],[1363392000000,0],[1363478400000,0],[1363564800000,0],[1363651200000,0],[1363737600000,0],[1363824000000,0],[1363910400000,0],[1363996800000,0],[1364083200000,0],[1364169600000,0],[1364256000000,0],[1364342400000,0],[1364428800000,0],[1364515200000,0],[1364601600000,0],[1364688000000,0],[1364770800000,0],[1364857200000,0],[1364943600000,0],[1365030000000,0],[1365116400000,0],[1365202800000,0],[1365289200000,0],[1365375600000,0],[1365462000000,0],[1365548400000,0],[1365634800000,0],[1365721200000,0],[1365807600000,0],[1365894000000,0],[1365980400000,0],[1366066800000,0],[1366153200000,0],[1366239600000,0],[1366326000000,0],[1366412400000,0],[1366498800000,0],[1366585200000,0],[1366671600000,0],[1366758000000,0],[1366844400000,0],[1366930800000,0],[1367017200000,0],[1367103600000,0],[1367190000000,0],[1367276400000,0],[1367362800000,0],[1367449200000,5490]]
Thanks for your help.
I'm not sure, the problem is that you can't see the chart? That's cause your data contains '
Check the jsFiddle: http://jsfiddle.net/SqZY2/1/
You have this:
data = '[[1362355200000,672],[1362441600000,9764],[1367103600000,0],[1367190000000,0],[1367276400000,0],[1367362800000,0],[1367449200000,5490]]';
Must be this:
data = [[1362355200000,672],[1362441600000,9764],[1362528000000,9839],[1362614400000,9906],[1367103600000,0],[1367190000000,0],[1367276400000,0],[1367362800000,0],[1367449200000,5490]];

Disable marker on certain points on highcharts

Hi my solution for this was:
data:{
series:[
{
x: 1234,
y: 45678,
marker: {
enabled: false,
states:{
hover:{
enabled: false,
},
select:{
enabled: false,
}
}
}
},
.... //other data
]
}
But for the state hover still appears... :(
demo:
http://jsfiddle.net/favio41/ertzq/
Cheers
It is known bug, reported here: https://github.com/highslide-software/highcharts.com/issues/1610
UPDATE: The bug is fixed now. Make sure you are using latest version of Highcharts library.

Resources