highcharts end point to endpoint connection - javascript

in my chart highcharts connect the start and end point of the graph. I dont want this to happen . how can I solve it. js fiddle link:https://jsfiddle.net/mdng223/h2o57agx/
My question is similar to this but have not got the solution provided herehttps://www.highcharts.com/forum/viewtopic.php?t=43018
Highcharts.setOptions({
global: {
useUTC: false
}
});
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
tooltip: {
xDateFormat: '%d/%m/%Y',
shared: true,
split: false,
enabled: true
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
crosshair: {
snap: true
}
},
legend: {
enabled: true
},
series: [{
data: []
},]
});

You have unsorted data: https://www.highcharts.com/errors/15/
Here: https://jsfiddle.net/BlackLabel/7rzb6e85/ you can find out which elements in the data array are unsorted.
And here is how you can sort your data by x values:
data.sort((a,b) => a[0] - b[0]);
Live demo: https://jsfiddle.net/BlackLabel/w7x6dtLo/

it works fine you have to add .sort() at the end of your data array to solve this issue

Related

Legend in network graph ( Highchart Js)

I want to show the user about which nodes are some sort of type in network graph of Highchart JS.
For example, the red node would be about "car" and the black node would be about "person".
How can I implement such a legend in Highchart Js?
Here is my codepen.
Highcharts.seriesTypes.networkgraph.prototype.drawLegendSymbol = Highcharts.LegendSymbolMixin.drawRectangle;
Highcharts.chart('container', {
chart: {
type: 'networkgraph'
},
plotOptions: {
networkgraph: {
keys: ['from', 'to']
}
},
legend: {
enabled: true
},
series: [{
showInLegend: true,
data: [
['A', 'B'],
['C','D'],
['E','F']
],
nodes:[{
id:'A',
color:'#ff1000'
},{
id:'B',
color:'#222222'
},
{
id:'C',
color:'#ff1000'
},
{
id:'D',
color:'#222222'
},
{
id:'E',
color:'#ff1000'
},
{
id:'F',
color:'#222222'
},]
}]
});
Thank you in advance.
Have you tried adding the dataLabel to series property and add a name to your nodes.
{
id: "A",
color: "#ff1000",
name: "car" <--------- name property
},
Something like this:
series: {
dataLabels: {
linkFormat: '',
enabled: true,
format: "{point.name}",
crop: false,
defer: false,
useHtml: true,
},
}
Full example:
https://codepen.io/tiagotedsky/pen/zYZYOLR

Highcharts errors when webpage in chrome background tab

I need some help with the following issue: it looks like since the latests Highcharts update (v7.0.2 2019-01-17), my pages are not working only when refreshing in background. If the webpage is always visible on my screen, everything will go smoothly, but if I have another chrome tab displayed on my screen, the update will not work and I will have this error:
highcharts.src.js:39446 Uncaught TypeError: Cannot read property 'pos' of undefined
at a.SVGElement.step (highcharts.src.js:39446)
at a.SVGElement.animate (highcharts.src.js:3654)
at r.animate (highcharts.src.js:39437)
at r.x (highcharts-more.src.js:7599)
at r.a.(anonymous function) [as animate] (https://code.highcharts.com/highcharts.js:20:270)
at render (highcharts.src.js:35110)
at highcharts.src.js:28431
at Array.forEach (<anonymous>)
at a.Chart.renderSeries (highcharts.src.js:28429)
at a.Chart.render (highcharts.src.js:28570)
The Javascript code for this chart is as follows:
Highcharts.chart('MychartID', {
chart: {
zoomType:'x',
alignTicks: false
},
tooltip: {
shared:false,
},
title: {
text: 'Title'
},
xAxis: {
type: 'category',
title: {
enabled: false,
text: 'PTU',
},
},
yAxis: [{
lineWidth: 1,
title: {
text: 'y1'
}
},
{
lineWidth: 1,
title: {
text: 'y2'
}
},
],
plotOptions: {
line: {
dataLabels: {
enabled: false,
},
},
column: {
dataLabels: {
enabled: true,
},
}
},
series: [
{
yAxis: 1,
type: 'column',
name: 'serie1',
data: serie1
},
{
name: 'serie2',
data: serie2
},
]
});
Do you have any idea of what is going wrong?
Thank you for your help!
This issue was a bug and it is fixed. It will be available in the next release of Highcharts.
The solution before release is to use code from Highcharts GitHub master branch where this bug is solved. You can download it here: https://github.highcharts.com/master/highcharts.src.js

Is there anyway to group my data per year that will summarize it and make it 1?

in my code im trying to display all the enrolled students per year and i want to summarize them all in 1 column per year.
is there anyway to add filter or most likely in the code itselft to combine all the data per year?
var strCampus = "ORT";
$(function() {
$.getJSON("http://localhost:37590/Get_OGSData/" + strCampus, function(data) {
console.log(data);
Highcharts.chart('container', {
chart: {
type: 'column'
},
rangeSelector: {
selected: 1
},
title: {
text: 'On Going Students per Year'
},
subtitle: {
text: 'Click each column to see details'
},
xAxis: {
type: 'category',
categories: data.map(function(x) {
return x.YEAR;
})
},
yAxis: {
title: {
text: 'On Going Students'
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
//format: '{point.y:.1f}'
}
}
},
tooltip: {
enabled: false,
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:2f}</b> of total<br/>'
},
series: [{
colorByPoint: true,
data: data.map(function(x) {
return x.OGS * 1;
})
}]
});
});
});
i want to combine all the data per year in 1 column
You can use dataGrouping with options below:
dataGrouping: {
approximation: 'sum',
forced: true,
units: [
['year', [1]]
]
}
Live demo: http://jsfiddle.net/BlackLabel/me3Lzur6/
API reference: https://api.highcharts.com/highstock/series.column.dataGrouping

HighChart created before $.getJSON

I am using HighCharts to make a graph with columns, drilldown series and scatter. The problem which I am having, is that the HighChart is created before the $.getJSON function is succesfully exicited. I have found several other articles, but non yet where two $.getJSON functions are called. The code which I am using:
$(function () {
// Create the chart
var options = {
chart: {
renderTo: 'container_genomefraction',
type: 'column',
events: {
// Declare the events changing when the drilldown is activated
drilldown: function(options) {
this.yAxis[0].update({
labels: {
format: '{value}'
},
title: {text : "Gbp"}
}, false, false);
options.seriesOptions.dataLabels = {
format: '{point.y:.1f}'
};
options.seriesOptions.tooltip = {
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>'
};
},
// Declare the events changing when the drillup is activated
drillup: function () {
this.yAxis[0].update({
labels: {
format: '{value}%'
},
title: {text : "Percentages"}
}, false, false);
}
}
},
title: {
text: 'Comparison'
},
xAxis: {
type: 'category'
},
yAxis: [{
title: {
enabled: true,
text: 'Percentages',
style: {
fontWeight: 'normal'
}
},
labels: {
format: '{value}%'
}
},{
min: 0,
title :{
text : 'input'
},
labels: {
format : '{value}'
},
opposite: true
}],
legend: {
enabled: false
},
plotOptions: {
series: {
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: null, // inherit from series
size : 50
},
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
// Declare an empty series
series: [{
name: '',
colorByPoint: true,
data: []
}],
credits: {
enabled: false
},
// Declare an empty drilldown series
drilldown: {
series: [{
name : '',
id: '',
data: []
}]
}
};
// Your $.getJSON() request is now synchronous...
$.ajaxSetup({
async: false
});
// Get the input into one series
$.getJSON('/uploads/fraction.json', function (list) {
options.series = list;
});
// Get the drilldown estimated and total size into one series
$.getJSON('/uploads/drilldown.json', function (list2) {
options.drilldown.series = list2;
var chart = new Highcharts.Chart(options);
});
$.ajaxSetup({
async: true
});
});
My JSONs are formatted:
fraction.json
[{"name":"1","colorByPoint":true,"data":[{"name":1,"y":80,"drilldown":1},{"name":2,"y":87,"drilldown":2},{"name":3,"y":105.71428571429,"drilldown":3}]},{"name":"input","dataLabels":"{enabled,false}","yAxis":1,"type":"scatter","data":[{"y":38,"name":1,"drilldown":1},{"y":"","name":2,"drilldown":2},{"y":27,"name":3,"drilldown":3}],"tooltip":{"headerFormat":"<span style='font-size:11px'>{series.name}<\/span><br>","pointFormat":"<span style='color:{point.color}'>{point.name}<\/span>: <b>{point.y}<\/b><br\/>"}}]
drilldown.json
[{"name":1,"id":1,"data":[["Total",2],["Estimated",2.5]]},{"name":2,"id":2,"data":[["Total",3.9],["Estimated",4.5]]},{"name":3,"id":3,"data":[["Total",3.7],["Estimated",3.5]]}]
When the page is loaded, the graph displays the values of the previous search done and when I reload the page, the correct data is shown. Could someone please help me out?
Add the second getJSON method in the first getJSON success callback like this:
//Get the genome fraction into one series
$.getJSON('/uploads/fraction.json', function (list) {
options.series = list;
//Get the drilldown estimated and total genome size into one series
$.getJSON('/uploads/drilldown.json', function (list2) {
options.drilldown.series = list2;
var chart = new Highcharts.Chart(options);
});
});

Highchart JS set min Y Axis from 0 to 1

I tried setting the min of the Y Axis to 1 as seen in my js fiddle here: http://jsfiddle.net/e2XPx/
Anyone know how to make the 0 value be 1 by default?
$(function () {
$('#container0').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Keyword: test'
},
xAxis: {
categories:['04-14-2013','04-15-2013','04-16-2013','04-17-2013','04-18-2013','04-19-2013','04-20-2013']
},
yAxis: {
allowDecimals: false,
min: 1,
title: {
text: 'Number'
},
reversed: true
},
series: [{
name: 'test',
data: [1,4,5,2,6,7,8]
}],
});
});
You can use tickPostitions: http://api.highcharts.com/highcharts#yAxis.tickPositions or tickPositioner http://api.highcharts.com/highcharts#yAxis.tickPositioner

Categories

Resources