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.
Related
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
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.
I made a barchart with dates. Currently, to remove the dates, you must click on the dates in the legend. I wish delete multiple dates at once.
Let's take an example. My dates range from 1960 to 2015. If I would have on my chart the dates from 2000 to 2005, so I would like that if you click on 1960 and 1999, then all the dates between are deleted / hidden. It goes faster when many dates.
How to do ?
Here is my code :
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
colors:[
'#7cb5ec',
'#434348',
'#90ed7d',
'#f7a35c',
'#8085e9',
'#f15c80',
'#e4d354',
'#2b908f',
'#f45b5b',
'#91e8e1',
'#DA70D6',
'#1E90FF',
'#E0F000'
],
legend:{
itemStyle:{
fontSize:'10px',
font:'10pt',
color:'#000000'
}
},
title:{
style:{
fontSize:'0px'
}
},
subtitle:{
style:{
fontSize:'0px'
}
},
xAxis: {
categories: [
'',
],
},
yAxis: {
min: 15,
title: {
text: 'Number',
style:{
fontSize:'0px'
}
}
},
tooltip: {
shared: false,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '2004',
data: [49.9],
},
{
name: '2005',
data: [83.6]
},
{
name: '2006',
data: [48.9]
},
{
name: '2007',
data: [69.1]
},
{
name: '2008',
data: [83.6]
},
{
name: '2009',
data: [40.9]
},
{
name: '2010',
data: [69.9]
},
{
name: '2011',
data: [83]
},
{
name: '2012',
data: [28.9]
},
{
name: '2013',
data: [40.9]
},
{
name: '2014',
data: [81.6]
},
{
name: '2015',
data: [24.9]
},
{
name: '2016',
data: [46.4]
}]
});
});
Thanks
Rather than having each year as its own series, I would recommend that you place the years as the values in your x-axis (as categories) and then use Highcharts' native zoom function to allow users to select a certain date range.
I've updated your fiddle with some changes, which I explain below: https://jsfiddle.net/brightmatrix/hr28s27L/
First, in your chart option, I added zoomType: 'x' to allow users to use their mouse to zoom in on specific years. The value x means they can only zoom horizontally (across), which makes for a "cleaner" interaction.
chart: {
type: 'column',
zoomType: 'x'
},
Second, I updated your x-axis with the years as the categories/values:
xAxis: {
categories: ['2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016']
},
Lastly, I updated your series to show just the data points, which are then plotted on the y-axis:
series: [{
name: 'data by year',
data: [49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4]
}]
Here is what happens when a user clicks and drags their mouse cursor:
The shaded box is what they are selecting. Once they release the cursor, the chart will automatically adjust to show only what they chose. A "Reset Zoom" button will appear at the top right to allow them to go back to all years:
Update (July 19, 2016): I did some research on adding a simple slider element to this chart that allows users to choose from a range of years.
An updated version of my fiddle that shows this example chart with sliders can be found here: https://jsfiddle.net/brightmatrix/uvat8u05/.
The code to handle the sliders is shown below. I discovered that explicitly setting the slider values to integers using the parseInt() function solved a couple of problems:
You can correctly compare the slider values to make sure users can't choose an end year that is earlier than the start year.
The setExtremes() function correctly shows a single year when users choose the same start and end year.
All x-axis labels are shown at all times. Before I added parseInt(), some labels disappeared when users chose different values in the sliders.
Please be sure to read the comments I've left in both the HTML and Javascript panes, as I've included additional details on why I made certain code decisions.
// on change handler for both sliders
$('.mySlider').bind('change', function(e) {
e.preventDefault();
var chart = $('#container').highcharts();
// convert the slider values to integers to make sure setExtremes() works as expected
var slider1Val = parseInt($('input[name="slider1"]').val());
var slider2Val = parseInt($('input[name="slider2"]').val());
if (slider2Val < slider1Val) {
// warn the user if they try to choose an end year that is later than the start year
alert("You can't choose an end year that is earlier than your start year.");
} else {
// use setExtremes to set the x-axis ranges based on the values in the sliders
chart.xAxis[0].setExtremes(slider1Val, slider2Val);
}
});
I hope this information is helpful for you.
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.
I'm working on project to display stock information using Highstock.
Question 1:
I tried to display ohlc data using ohlc graph, high and low using areasplinerange graph, and volume using column chart.
Everything works fine, if i zoom 1m, 3m, 6m, YTD, and 1y. Here is the snapshot. link1. But if zoom to All, The graph messed up like this link2.
Am i wrong in my coding or it's bug?
Question 2:
In the same chart, I have code to change the type of graph from ohlc to line. It works fine when I zoom to 1m, 3m. Here is the snapshot link3. But it show me no line chart when i zoom to 6m, 1y, and All. Here is the snapshot link4.
How can this happen?
Thank you for your help.
The Code:
Here is the code that i used to display the chart
$.getJSON(url, function (data1) {
$.getJSON(urlprediction, function (data2) {
var ohlc = [],
volume = [],
closed = [],
forecast = [],
dataLength1 = data1.length;
dataLength2 = data2.length;
for (i = 0; i < dataLength1; i++) {
ohlc.push([
data1[i][0], // the date
data1[i][1], // open
data1[i][2], // high
data1[i][3], // low
data1[i][4] // close
]);
closed.push([
data1[i][0], // the date
data1[i][4] // close
]);
volume.push([
data1[i][0], // the date
data1[i][5] // the volume
])
}
for (i = 0; i < dataLength2; i++) {
forecast.push([
data1[i][0], // the date
data1[i][1],
data1[i][2], // close
])
}
// set the allowed units for data grouping
var groupingUnits = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]];
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
title: {
text: title
},
yAxis: [{
title: {
text: 'OHLC'
},
height: 360,
lineWidth: 2
}, {
title: {
text: 'Volume'
},
top: 433,
height: 100,
offset: 0,
lineWidth: 2
}],
series: [{
type: 'ohlc',
name: stockname,
data: ohlc,
}, {
type: 'areasplinerange',
name: stockname,
data: data2,
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
}]
});
});
});