I have two series only one difference in both series that 2018-07-09 is not exist in first series thats why graph show that point at the end of the graph that is wrong.
My Series are:
series: [{name: "Grouped rep_oos",
data:
[{name: "2018-07-01", y: 1.1},
{name: "2018-07-02", y: 2.02},
{name: "2018-07-03", y: 3.85},
{name: "2018-07-04", y: 0.0},
{name: "2018-07-05", y: 2.6},
{name: "2018-07-06", y: 1.06},
{name: "2018-07-07", y: 2.86},
{name: "2018-07-08", y: 0.98},
{name: "2018-07-10", y: 4.94},
{name: "2018-07-11", y: 4.21},
{name: "2018-07-12", y: 6.32},
{name: "2018-07-13", y: 2.73},
{name: "2018-07-14", y: 1.08},
{name: "2018-07-15", y: 1.08},
{name: "2018-07-16", y: 0.0},
{name: "2018-07-17", y: 0.78},
{name: "2018-07-18", y: 0.0},
{name: "2018-07-19", y: 3.95},
{name: "2018-07-20", y: 2.9},
{name: "2018-07-21", y: 3.64}],
yAxis: 1,
type: "line"},
{name: "Grouped change_in_conversion_prior_period",
data:
[{name: "2018-07-01", y: 37.44},
{name: "2018-07-02", y: -56.74},
{name: "2018-07-03", y: 30.89},
{name: "2018-07-04", y: 12.55},
{name: "2018-07-05", y: 52.73},
{name: "2018-07-06", y: -41.49},
{name: "2018-07-07", y: 47.71},
{name: "2018-07-08", y: 18.54},
{name: "2018-07-09", y: 53.38},
{name: "2018-07-10", y: -48.15},
{name: "2018-07-11", y: -57.37},
{name: "2018-07-12", y: 116.67},
{name: "2018-07-13", y: -53.5},
{name: "2018-07-14", y: 102.76},
{name: "2018-07-15", y: 91.67},
{name: "2018-07-16", y: -30.68},
{name: "2018-07-17", y: -27.08},
{name: "2018-07-18", y: 100.0},
{name: "2018-07-19", y: -26.32},
{name: "2018-07-20", y: 2.28},
{name: "2018-07-21", y: 15.8}],
yAxis: 1,
type: "line"}]
You have 2 solutions :
Changing xAxis.type and the date format API Doc
Highcharts.chart('container', {
xAxis: {
type: 'datetime'
},
...
series: [{
name: "Grouped rep_oos",
data: [
[1530403200000, 1.1],
[1530489600000, 2.02],
...
Fiddle
Add null data for empty and connectNulls API Doc
data:[
...
{name: "2018-07-09", y:null},
...],
connectNulls: true,
Fiddle
The names of the categories are created from the first series and then they are supplemented from the others, so in your case you can simply change the order of the series.
series: [{
name: "Grouped change_in_conversion_prior_period",
data: [{
name: "2018-07-01",
y: 37.44
},
{
name: "2018-07-02",
y: -56.74
},
...
],
type: "line"
}, {
name: "Grouped rep_oos",
data: [{
name: "2018-07-01",
y: 1.1
},
{
name: "2018-07-02",
y: 2.02
},
...
],
type: "line"
}]
Live demo: http://jsfiddle.net/BlackLabel/2d4Lmraj/
The problem occurs, because you're trying to pass the date as category name (name: [string_value]).
The way out of that is (as #Core972 said before) set your xAxis.type to datetime, but also process your data, because it should be passed as the timestamp value. You can achieve it by writing simple processing function, please take a look below:
function processData(data) {
var processed = []
data.forEach(function(series) {
processed.push({
name: series.name,
data: series.data.map(data => {
var myDate = data.name
myDate = myDate.split("-").map(elem => { return parseInt(elem) });
return [Date.UTC(myDate[0], myDate[1], myDate[2]), data.y]
}),
type: series.type
})
})
return processed
}
Function above takes one argument, which is your series (with current structure ofc.), and returns the array with processed series objects.
Live example: https://jsfiddle.net/h2rydgkc/
Related
I am working on creating a nested donut chart with highcharts.
I saw the below link :
can we make nested donut charts in highcharts?
is there a way we can add some space/margins around each donut.
Following the linked example, you could do something like that:
series: [{
type: 'pie',
name: 'Election',
size: '60%', // Change this parameter
innerSize: '50%', // Change this parameter
data: [
{name: "A", y: 20},
{name: "B", y: 10},
{name: "C", y: 15}
]
}, {
type: 'pie',
name: 'Proprietary or Undetectable',
innerSize: '80%', // Change this parameter
data: [
{name: "A", y: 10},
{name: "B", y: 15},
{name: "C", y: 20}
]
}]
Fiddle
I am having difficulty in drawing the bar chart as follows using Highcharts:
For drawing above chart, I guess that it is necessary to make one series has both positive and negative values for one category. But, I do not know how to make a series object in a Highchart option.
My code is here with JSFiddle.
I expected that below series worked, but it did not.
series: [{
name: 'Series 1',
data: [[-19, 10], [-31, 20]]
}, {
name: 'Series 2',
data: [[-10, 33], [-20, 56]]
}, {
name: 'Series 3',
data: [[-23, 10], [-30, 13]]
}
Also, I saw a Highchart's demo: Bar with negative stack. However, this demo has a different series structure with what I tried; it has only two series: "male or negative" and "female or positive". It seems difficult to have more than two series in this demo.
I am not 100% sure of exactly what values you want to go where, but the concept of how I would solve this, is as follows:
series: [{
name: 'Series 1',
data: [{x: 0, y: -19}, {x: 0, y: 10},
{x: 1, y: -31}, {x: 1, y: 20}]
}, {
name: 'Series 2',
data: [{x: 0, y: 33}, {x: 0, y: -10},
{x: 1, y: 56}, {x: 1, y: -20},]
}, {
name: 'Series 3',
data: [{x: 0, y: 10}, {x: 0, y: -23},
{x: 1, y: 13}, {x: 1, y: -30}]
}]
Where we still have the same 3 series, but we explicitly state which category the values should belong to, i.e. x: 0 is category 1, and x: 1 is category 2.
Working JSfiddle example: https://jsfiddle.net/ewolden/kdszxjn3/6/
Can any one tell me that how to give multiple id's to a highchart drill down or can i give a class to that for accessing multidynamic data, like i write the drill down id's below, can we write like this
- drilldown: {
series: [ {
id:'level1',
name: 'Level 1',
data: [
{name: 'Trees', y: 1},
{name: 'Plants', y: 2},
{name: 'Grass', y: 3},
{name: 'Deeper', y: 4, drilldown: 'level2', drilldown: 'level3', drilldown: 'level4' }
]
}
data labels overlapping is a tricky problem when areas of the chart are crowded.
Let's look here: http://jsfiddle.net/zpd88mt7/1/
HTML
<body>
<div id="container" class="chart_container" style="width:800px; height:400px;"></div>
</body>
JS
var chart_options = {
chart: {
renderTo: 'container',
type: 'scatter',
zoomType: 'xy'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
align: 'center',
rotation: 0,
x: 0,
y: -2,
formatter: function() {
return this.point.name;
}
},
marker: {symbol: 'circle'}
}
},
series: [
{
id: 'volumes',
lineWidth: 0,
index: 10,
marker: {
enabled: true,
radius: 4
},
data: [
{x: 6798, y: 770, name: '01-XXXXXXXXX', id: '01'},
{x: 7934, y: 1350, name: '02-XXXXXXXXX', id: '02'},
{x: 7516, y: 926, name: '03-XXXXXXXXX', id: '03'},
{x: 7143, y: 907, name: '04-XXXXXXXXX', id: '04'},
{x: 7741, y: 1188, name: '05-XXXXXXXXX', id: '05'},
{x: 3449, y: 1121, name: '06-XXXXXXXXX', id: '06'},
{x: 7542, y: 917, name: '07-XXXXXXXXX', id: '07'},
{x: 8634, y: 1124, name: '08-XXXXXXXXX', id: '08'},
{x: 7986, y: 1132, name: '09-XXXXXXXXX', id: '09'},
{x: 9311, y: 1261, name: '10-XXXXXXXXX', id: '10'},
{x: 7681, y: 552, name: '11-XXXXXXXXX', id: '11'},
{x: 7665, y: 1148, name: '12-XXXXXXXXX', id: '12'},
{x: 8024, y: 889, name: '13-XXXXXXXXX', id: '13'},
{x: 8882, y: 1278, name: '14-XXXXXXXXX', id: '14'},
{x: 7164, y: 1015, name: '15-XXXXXXXXX', id: '15'}
]
}
]
}
var chart;
$(function() {
chart = new Highcharts.Chart(chart_options);
}
);
A good solution could be iterating on labels and moving them upward (or elsewhere) in a free nearby position and connect them to their dot with a line. But it looks like something needing a good amount of time and effort.
Do you know if this has already been solved?
Maybe Highcharts developers are planning something on this side? Probably this is affecting many Highcharts users.
I have a stacked column chart that drills down to a pie chart. The drilldown works fine if the data point is clicked. However, the xAxis labels are also clickable which displays the all pie charts for those points in the series. Unfortunately they overlap.
Is there some way to disable drilldown on the xAxis labels?
Here is a JSFiddle: http://jsfiddle.net/uEQL2/
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
plotOptions: {
column : {
stacking : 'normal'
}
},
series: [{
name: 'On Time',
data: [{
name: 'Location 1',
y: 5,
drilldown: 'l1-ot'
}, {
name: 'Location 2',
y: 2,
drilldown: 'l2-ot'
}, {
name: 'Location 3',
y: 4,
drilldown: 'l3-ot'
}]
},{
name: 'Late',
data: [{
name: 'Location 1',
y: 5,
drilldown: 'l1-l'
}, {
name: 'Location 2',
y: 8,
drilldown: 'l2-l'
}, {
name: 'Location 3',
y: 6,
drilldown: 'l3-l'
}]
}],
drilldown: {
series: [{
type: 'pie',
id: 'l1-ot',
data: [
{name: 'Widget A', y: 2},
{name: 'Widget B', y: 3},
]
}, {
type: 'pie',
id: 'l1-l',
data: [
{name: 'Widget A', y: 1},
{name: 'Widget B', y: 4},
]
}, {
type: 'pie',
id: 'l2-ot',
data: [
{name: 'Widget A', y: 1},
{name: 'Widget B', y: 1},
]
}, {
type: 'pie',
id: 'l2-l',
data: [
{name: 'Widget A', y: 2},
{name: 'Widget B', y: 6},
]
},{
type: 'pie',
id: 'l3-ot',
data: [
{name: 'Widget A', y: 1},
{name: 'Widget B', y: 3},
]
}, {
type: 'pie',
id: 'l3-l',
data: [
{name: 'Widget A', y: 3},
{name: 'Widget B', y: 3},
]
}
]
}
})
});
This is how you can make x-axis labels unlickable on drilldown. Take a look at this demo: JSFIDDLE
code:
$(function () {
(function (H) {
//For X-axis labels
H.wrap(H.Point.prototype, 'init', function (proceed, series, options, x) {
var point = proceed.call(this, series, options, x),
chart = series.chart,
tick = series.xAxis && series.xAxis.ticks[x],
tickLabel = tick && tick.label;
//console.log("series");
//console.log(series);
if (point.drilldown) {
if (tickLabel) {
if (!tickLabel._basicStyle) {
tickLabel._basicStyle = tickLabel.element.getAttribute('style');
}
tickLabel.addClass('highcharts-drilldown-axis-label') .css({
'text-decoration': 'none',
'font-weight': 'normal',
'cursor': 'auto'
}).on('click', function () {
if (point.doDrilldown) {
return false;
}
});//remove this "on" block to make axis labels clickable
}
}
else if (tickLabel && tickLabel._basicStyle)
{
}
return point;
});
})(Highcharts);
// Create the chart
$('#container').highcharts({
.....
.......