Related
Below are my questions
I am using advanced accessible chart in high charts and I have customized few data points to be circle . Since the data for these points is almost in the same range , it's causing the data points to overlap . How do I prevent this?
the tooltip provided for these customized data points(circle) are not showing up . How to get the tool tip displayed.
I have been pondering a lot but none of the solution is working . Any help is appreciated.
Thanks.
enter image description here
function DrawRemoteRequestPSRChart(seriesData, yAxisCategories) {
Highcharts.seriesType('lowmedhigh', 'boxplot', {
keys: ['low', 'high'],
}, {
drawPoints: function () {
var series = this;
this.points.forEach(function (point) {
var graphic = point.graphic,
verb = graphic ? 'animate' : 'attr',
shapeArgs = point.shapeArgs,
width = 0,
left = Math.floor(shapeArgs.x) + 0.5,
right = left + width,
crispX = left + Math.round(width / 2) + 0.5,
highPlot = Math.floor(point.highPlot) + 0.5,
lowPlot = Math.floor(point.lowPlot) +
0.5 - (point.low === 0 ? 1 : 0);
if (point.low == point.high) {
highPlot = lowPlot - 20;
}
else if (lowPlot - highPlot < 20) {
highPlot = lowPlot - 20;
}
if (point.isNull) {
return;
}
if (!graphic) {
point.graphic = graphic = series.chart.renderer
.path('point')
.add(series.group);
} else {
console.log('graphic');
}
if (Math.floor(point.lowPlot) == Math.floor(point.highPlot)) {
graphic.attr({
stroke: "#FFCD11",
"stroke-width": 2,
});
//console.log('point.lowPlot & highplot ' + point.lowPlot, point.highPlot )
}
else {
graphic.attr({
stroke: "lime",
"stroke-width": 4,
"borderColor": "black"
});
}
graphic[verb]({
d: [
'M', left, highPlot,
'H', right,
'M', left, lowPlot,
'H', right,
'M', crispX, highPlot,
'V', lowPlot
]
});
});
}
});
var chart = Highcharts.chart('GraphHere', {
chart: {
type: 'lowmedhigh',
inverted: true,
},
credits: {
enabled: false
}, legend: {
enabled: false
},
title: {
text: ''
},
tooltip: {
useHTML: true,
shared: false,
formatter: function () {
if (this.point.options.low != this.point.options.high) {
return this.point.category + ': <br>PSR Request Time: ' + new Date(this.point.options.low).toGMTString() +
' <br>PSR Received Time: ' + new Date(this.point.options.high).toGMTString();
} else {
return this.point.category + ': <br>PSR Request Time: ' + new Date(this.point.options.low).toGMTString() +
' <br>PSR Received Time: N/A';
}
},
pointFormatter: function () {
if (this.point.options.low != this.point.options.high) {
return this.point.category + ': <br>PSR Request Time: ' + new Date(this.point.options.low).toGMTString() +
' <br>PSR Received Time: ' + new Date(this.point.options.high).toGMTString();
} else {
return this.point.category + ': <br>PSR Request Time: ' + new Date(this.point.options.low).toGMTString() +
' <br>PSR Received Time: N/A';
}
}
},
xAxis: [{
categories: yAxisCategories,
crosshair: true,
gridLineWidth: 1,
}],
yAxis: {
type: 'datetime',
gridLineWidth: 0
},
plotOptions: {
column: {
pointWidth: 10
},
series: {
stickyTracking: true,
whiskerWidth: 2,
grouping: true
}
},
series: seriesData
});
var seriesidexlength = chart.series.length;
for (var seriesidex = 0; seriesidex < seriesidexlength; seriesidex++) {
var dataindexlength = chart.series[seriesidex].data.length;
for (var dataindex = 0; dataindex < dataindexlength; dataindex++) {
var fromdate = new Date(chart.series[seriesidex].data[dataindex].low);
var todate = new Date(chart.series[seriesidex].data[dataindex].high);
if (fromdate.getDate() == todate.getDate()) {
//if (chart.series[seriesidex].data[dataindex].low == chart.series[seriesidex].data[dataindex].high) {
if (chart.series[seriesidex].data[dataindex].graphic != undefined) {
var obj = chart.series[seriesidex].data[dataindex].graphic.renderer.symbol('circle', chart.series[seriesidex].data[dataindex].plotX, chart.series[seriesidex].data[dataindex].plotY, 5).attr({ fill: 'orange', pointwidth: 10 }).add(chart.series[seriesidex].group);
chart.series[seriesidex].data[dataindex].graphic.destroy();
chart.series[seriesidex].data[dataindex].graphic = obj;
//console.log("same date - " + chart.series[seriesidex].data[dataindex].plotX, chart.series[seriesidex].data[dataindex].plotY)
} else {
//console.log("undefined"+seriesidex, dataindex)
}
//}
} else {
//console.log("not same" + seriesidex, dataindex)
}
}
}
chart.container.onmousedown = null;
chart.container.onclick = null;
$('.highcharts-yaxis').hide();
}
I am trying to make the regression to start from the origin , x=y=0. Is this possible to do. some say it is not good to do so but for some purposes I need to make the line through the origin. I am using highcharts.
How about adding a point to the regression series with x = y = 0 and setting the marker to disabled in order to hide it?
let discipline = [
{
name: "Football",
data: "football"
}
];
Highcharts.getJSON(
"https://raw.githubusercontent.com/mekhatria/demo_highcharts/master/olympic2012.json?callback=?",
function (data) {
function regression(arrWeight, arrHeight) {
let r, sy, sx, b, a, meanX, meanY;
r = jStat.corrcoeff(arrHeight, arrWeight);
sy = jStat.stdev(arrWeight);
sx = jStat.stdev(arrHeight);
meanY = jStat(arrWeight).mean();
meanX = jStat(arrHeight).mean();
b = r * (sy / sx);
a = meanY - meanX * b;
//Set up a line
let y1, y2, x1, x2;
x1 = jStat.min(arrHeight);
x2 = jStat.max(arrHeight);
y1 = a + b * x1;
y2 = a + b * x2;
return {
line: [
//Add x = 0, y = 0 to your regression logic?
{x: 0, y: 0, marker: {enabled: false}},
{x: x1, y: y1, marker: {enabled: true}},
{x: x2, y: y2, marker: {enabled: true}},
],
r
};
}
const getData = (continentName) => {
let temp = [],
tempWeight = [],
tempHeight = [];
data.forEach((elm) => {
if (
elm.continent == continentName &&
elm.weight > 0 &&
elm.height > 0
) {
temp.push([elm.height, elm.weight]);
tempWeight.push(elm.weight);
tempHeight.push(elm.height);
}
});
let { line, r } = regression(tempWeight, tempHeight);
return [temp, line, r];
};
const getDataSport = (sportName) => {
let temp = [],
tempWeight = [],
tempHeight = [];
data.forEach((elm) => {
if (elm.sport == sportName && elm.weight > 0 && elm.height > 0) {
temp.push([elm.height, elm.weight]);
tempWeight.push(elm.weight);
tempHeight.push(elm.height);
}
});
let { line, r } = regression(tempWeight, tempHeight);
return [temp, line, r];
};
let series = [],
visible = false,
index = 0,
activate = ["Football"];
discipline.forEach((e) => {
if (activate.indexOf(e.name) > -1) {
visible = true;
} else {
visible = false;
}
let [scatterData, line, r] = getDataSport(e.data);
series.push(
{
type: "scatter",
visible: visible,
name: e.name,
data: scatterData
},
{
name: e.name,
visible: visible,
r: r,
data: line
}
);
});
Highcharts.chart("container", {
chart: {
type: "line",
zoomType: "y",
},
title: {
text: "2012 Olympic football athletes' weight and height relationship"
},
xAxis: {
title: {
text: "Height"
},
labels: {
format: "{value} m"
},
},
yAxis: {
title: {
text: "Weight"
},
labels: {
format: "{value} kg"
}
},
legend: {
enabled: true
},
plotOptions: {
scatter: {
marker: {
radius: 2.5,
symbol: "circle",
states: {
hover: {
enabled: true,
lineColor: "rgb(100,100,100)"
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
},
line: {
lineWidth: 2.5
}
},
tooltip: {
formatter: function () {
if (this.series.data.length > 2) {
return (
this.series.name +
"<br/>Height: " +
this.x +
" m<br/>Weight: " +
this.y +
" kg"
);
} else {
return (
this.series.name +
"<br/>r: " +
this.series.userOptions.r.toFixed(2)
);
}
}
},
series: series
});
}
);
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jstat#latest/dist/jstat.min.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
I've implemented a polar chart in which each series has 4 values corresponding to 4 categories. When I export the chart csv, the category column contains polar coordinates. I would like to replace these with the corresponding category name. How do I do this?
Adding the categories to each series, had no effect. I also tried adding a categories property to the xAxis, but it had not effect. An xAxis.label formatter successfully returns the category name for each data polar coordinate.
const options = {
chart: {
polar: true,
},
title: {
text: '',
},
tooltip: {
valueDecimals: 2,
headerFormat: '<br/>',
},
legend: {},
pane: {
startAngle: 0,
endAngle: 360,
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
// eslint-disable-next-line
formatter: function() {
switch (this.value) {
case 45:
return '<b>Experience</b>'
case 135:
return '<b>Frictionless</b>'
case 225:
return '<b>Low Price</b>'
case 315:
return '<b>Brand</b>'
default:
return ''
}
},
},
},
yAxis: {
min: 0,
max: 10,
labels: {
format: '{}',
},
},
plotOptions: {
series: {
pointStart: 45,
pointInterval: 90,
},
column: {
pointPadding: 0,
groupPadding: 0,
},
},
series: kahnSeries,
}
You need to use categories property, but without options like: pointInterval, pointStart, min and max:
xAxis: {
categories: ['Experience', 'Frictionless', 'Low Price', 'Brand']
},
Live demo: http://jsfiddle.net/BlackLabel/z8cm1p39/
API Reference: https://api.highcharts.com/highcharts/xAxis.categories
To avoid changing the chart's current display, I wrapped the getCSV function and replaced the CSV category values. If there was a simpler way, please share it.
{
(function (H) {
H.wrap(H.Chart.prototype, 'getCSV', function (
proceed,
useLocalDecimalPoint
) {
// Run the original proceed method
const result = proceed.apply(
this,
Array.prototype.slice.call(arguments, 1)
)
const itemDelimiter = ','
const lineDelimiter = '\n'
const rows = result.split(lineDelimiter)
let newResult = ''
let rowCategories = false
rows.forEach((row, rowIndex) => {
const columns = row.split(itemDelimiter)
if (rowIndex === 0 && columns[0] === '"Category"') {
rowCategories = true
}
if (rowIndex > 0 && rowCategories) {
let newRow = formatter(columns[0])
columns.forEach((column, columnIndex) => {
if (columnIndex > 0) {
newRow += itemDelimiter
newRow += column
}
})
newResult += newRow
} else {
newResult += row
}
if (rowIndex < rows.length - 1) {
newResult += lineDelimiter
}
}
)
return newResult
})
}(Highcharts))
}
HI can I tweak tree map and do it ?
I can pass all data hierarchy .
its already implemented in d3 .
Can i use/tweak Any properties of highcharts to render icicle ?
You could use heatmap - see this SO question: Creating ICICLE Chart using Highcharts Library
Other way would be to use treemap. Unfortunately there is no default layout algorithm that would enable icicle chart, so it would have to be created.
How to create custom layout algorithm: http://www.highcharts.com/docs/chart-and-series-types/treemap
For icicle it will be better if children passed to layout algorithm will be unsorted. Feature can be changed by wrapping setTreeValues function.
Example: http://jsfiddle.net/c6bo2asn/
$(function () {
//start wapper
(function (H) {
H.wrap(H.seriesTypes.treemap.prototype, 'setTreeValues', function (proceed) {
var tree = arguments[1];
//setTreeValues: function (tree) {
var series = this,
childrenTotal = 0,
sorted = [],
val,
point = series.points[tree.i];
// First give the children some values
H.each(tree.children, function (child) {
child = series.setTreeValues(child);
series.insertElementSorted(sorted, child, function (el, el2) {
return 0;//do not sort
});
if (!child.ignore) {
childrenTotal += child.val;
} else {
// #todo Add predicate to avoid looping already ignored children
series.eachChildren(child, function (node) {
H.extend(node, {
ignore: true,
isLeaf: false,
visible: false
});
});
}
});
// Set the values
val = H.pick(point && point.value, childrenTotal);
H.extend(tree, {
children: sorted,
childrenTotal: childrenTotal,
// Ignore this node if point is not visible
ignore: !(H.pick(point && point.visible, true) && (val > 0)),
isLeaf: tree.visible && !childrenTotal,
name: H.pick(point && point.name, ""),
val: val
});
return tree;
//},
});
}(Highcharts));
//end wapper
//start layoutAlgorithm logic
function myFunction(parent, children) {
var childrenAreas = [],
widthSoFar = 0,
w;
Highcharts.each(children, function (child,i) {
if (child.level == 1) { //even lines
childrenAreas.push({
x: parent.x,
y: parent.y + parent.height*(i/children.length),
width: parent.width,
height: parent.height/children.length
});
} else {
w = parent.width * child.val/parent.val;
childrenAreas.push({
x: parent.x + widthSoFar,
y: parent.y,
width: child.name === '_empty' ? 0 : w,
height: parent.height
});
widthSoFar += w;
}
});
return childrenAreas;
}
//end layoutAlgorithm logic
//assign new layoutAlgorithm logic
Highcharts.seriesTypes.treemap.prototype.icicle = myFunction;
//create chart
$('#container').highcharts({
series: [{
type: "treemap",
layoutAlgorithm: 'icicle',
dataLabels: {
formatter: function(){
//hide _empty
return this.key === '_empty' ? '' : this.key;
},
rotation: -90
},
borderWidth: 0,
levels: [{
level: 2,
borderWidth: 1
}],
/*
level 1 data points are lines
*/
data: [{
id: 'top',
color: "#EC2500"
}, {
name: 'a Anne',
parent: 'top',
value: 50
}, {
name: 'a Rick',
parent: 'top',
value: 30
}, {
name: 'a Peter',
parent: 'top',
value: 20
}, {
id: 'second'
}, {
name: 'b Anne',
parent: 'second',
value: 30,
color: "#ECE100"
}, {
name: '_empty',
parent: 'second',
value: 20
}, {
name: 'b Peter',
parent: 'second',
value: 30,
color: "#EC9800"
}, {
name: '_empty',
parent: 'second',
value: 20
}, {
id: 'third',
color: '#EC9800'
}, {
name: 'o Anne',
parent: 'third',
value: 20
}, {
name: 'o Rick',
parent: 'third',
value: 10
}, {
name: '_empty',
parent: 'third',
value: 70
}, {
id: 'last',
color: '#669866'
}, {
name: '_empty',
parent: 'last',
value: 20
}, {
name: 'z Anne',
parent: 'last',
value: 10
}, {
name: '_empty',
parent: 'last',
value: 70
}]
}],
title: {
text: 'Fruit consumption'
}
});
});
I am using high charts to generate graphs. As per my requirement I want to generate the graph with dynamic minimum and maximum values. Even though I assigned minimum and maximum value, my graph is starting from less than my minimum value. I want my graph to be start with the user defined minimum value such that no white space should be there between axis and graph
Following is the fiddle
http://jsfiddle.net/0e4rqb88/
$(document).ready(function() {
var data1 = [{
"maximumLean": 4.6,
"usl": 5.5,
"framesFlag": 0,
"emptyConesFlag": 0,
"ninetyFivePFlag": 0,
"sigma3": 4.8,
"sigma4": 4.4,
"sigma1": 4.6,
"arrow": 0,
"inSpec": 100.0,
"sigma2": 4.7,
"recentLean2": 4.600084552015582,
"recentLean1": 4.368252611538148,
"recentLean4": 4.369438416014055,
"recentLean3": 4.495304457897132,
"check2Sigma": 1,
"ninetyFivePValue": 0.1,
"meanFlag": 0,
"sigma6": 4.2,
"sigma5": 4.3,
"conesFlag": 0,
"targetSpec": 4.5,
"check3Sigma": 1,
"cpm": 1.1,
"emptyCone": 8.9,
"ninetyPFlag": 0,
"lsl": 3.5,
"sampleSize": 30,
"minimumLean": 4.4,
"check1Sigma": -1,
"ninetyPValue": 0.1,
"sd": 0.1,
"fpm": 1.0,
"fc": 123,
"lean": 4.4,
"median": 4.4,
"medianFlag": 0,
"inspecFlag": 0,
"cl": 4.5,
"sdFlag": 0,
"cc": 135
}, {
"lean": 4.5
}, {
"lean": 4.6
}, {
"lean": 4.4
}, {
"start": "08-12-2014 12:00:00",
"end": "08-12-2014 14:00:00"
}]
$('#data').val(JSON.stringify(data1[0]));
var x = 1;
var inSpec = 0;
var avgLean = 0;
var mean = 0;
var median = 0;
var sd = 0;
var maximum = 0;
var minimum = 0;
var sigma1 = 0;
var sigma2 = 0;
var sigma3 = 0;
var sigma4 = 0;
var sigma5 = 0;
var sigma6 = 0;
var avgLeanPercent = 0;
var sampleSize = 0;
//
var meandataofHighChart = 0;
var sigdata = [];
var dataofHighChart = [];
var maxChartVal = 0;
var minChartVal = 0;
for (var event in data1) {
var dataCopy = data1[event];
if (x == 1) {
mean = dataCopy.cl;
sd = dataCopy.sd;
median = dataCopy.median;
maximum = dataCopy.maximumLean;
minimum = dataCopy.minimumLean;
sigma1 = dataCopy.sigma1;
sigma2 = dataCopy.sigma2;
sigma3 = dataCopy.sigma3;
sigma4 = dataCopy.sigma4;
sigma5 = dataCopy.sigma5;
sigma6 = dataCopy.sigma6;
emptyCone = dataCopy.emptyCone;
sampleSize = dataCopy.sampleSize != undefined ? dataCopy.sampleSize : 20;
//alert(" Cone "+conesPerMinute.toFixed(1)+" Frame "+dataCopy.fpm);
sigdata.push(sigma6);
sigdata.push(sigma5);
sigdata.push(sigma4);
sigdata.push(mean);
sigdata.push(sigma1);
sigdata.push(sigma2);
sigdata.push(sigma3);
//dataofHighChart.push(lean);
}
dataofHighChart.push(dataCopy.lean);
meandataofHighChart = (mean);
x++;
}
maxChartVal = maximum > sigma3 ? maximum : sigma3;
minChartVal = minimum < sigma6 ? minimum : sigma6;
console.info("sigdata " + sigdata);
console.info("maximum " + maximum);
console.info("sigma3 " + sigma3);
console.info("minimum " + minimum);
console.info("sigma6 " + sigma6);
console.info("maxChartVal " + maxChartVal);
console.info("minChartVal " + minChartVal);
minChartVal = minChartVal > 0 ? (minChartVal) - 0.1000000000000005 : 0;
maxChartVal = maxChartVal > 0 ? (maxChartVal) + 0.1000000000000005 : 0;
console.info("maxChartVal " + maxChartVal);
console.info("minChartVal " + minChartVal);
var highchart = new Highcharts.Chart({
chart: {
marginRight: 80,
zoomType: "x",
renderTo: 'chart_div', // like ,
height: 350
},
title: {
text: 'X-Bar Chart',
style: {
"font-weight": "bold",
"font-size": "16px;"
}
},
xAxis: {
floor: 1,
allowDecimals: false,
title: {
text: "Sample Number (N = " + sampleSize + ")",
style: {
"font-weight": "bold",
"font-size": "14px;"
}
}
},
tooltip: {
formatter: function() {
return 'Sample Number : ' + this.point.x + '<br/> % Lean : ' + this.point.y + ' %';
}
},
yAxis: [{
lineWidth: 1,
max: maxChartVal,
min: minChartVal,
floor: minChartVal,
title: {
text: '% Lean',
style: {
"font-weight": "bold",
"font-size": "14px;"
}
},
plotLines: [{
value: meandataofHighChart,
color: '#000000',
width: 2,
zIndex: 4
}],
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null,
plotBands: [{
from: minChartVal,
to: sigdata[1],
color: '#FF7F7F'
}, {
from: sigdata[1],
to: sigdata[2],
color: '#FFFF7F'
}, {
from: sigdata[2],
to: sigdata[3],
color: '#7FBF7F'
}, {
from: sigdata[3],
to: sigdata[4],
color: '#7FBF7F'
}, {
from: sigdata[4],
to: sigdata[5],
color: '#FFFF7F'
}, {
from: sigdata[5],
to: maxChartVal,
color: '#FF7F7F'
}]
}],
series: [{
name: '% Lean',
data: dataofHighChart,
color: '#00407F'
}]
});
});
By default, the startOnTick option and endOnTick option is true for the yAxis. If you set those to false, highcharts will respect your min/max options.
Here's updated fiddle.
yAxis: [{
...
max:maxChartVal,
min:minChartVal,
startOnTick: false,
endOnTick: false,
...