We Keep Coding

How to slide in highcharts

I want to slide in Highcharts view , Now i just slide from 'rangeSelector'.This are my code , please help me . I don't know how to set configurations ----------------- The data are too many , but i think the data is no problem , I think the problem is my configuration ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
this.Highcharts = Highcharts.stockChart(`${this.wrapId}`,
{
chart: {
// zoomType: "x"
plotBackgroundColor: "rgb(255, 255, 255)",
backgroundColor: "rgb(255, 255, 255)",
events: {
redraw: function() {
let series = this.series[0];
},
render: function() {}
}
},
title: {
text: ""
},
subtitle: {},
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
second: '%m/%d %H:%M',
minute: '%m/%d %H:%M',
hour: '%m/%d %H:%M',
day: '%m-%d',
week: '%m-%d',
month: '%Y-%m',
year: '%Y'
},
// tickInterval: 60 * 1000, // 刻度线 1分种
lineColor: "rgb(230, 230, 230)",
lineWidth: 2,
gridLineWidth: 1,
gridZIndex: 1,
tickPosition: "outside", // 刻度
tickColor: "transparent", // 刻度颜色
gridLineColor: "transparent",
range:3600000,
},
credits: {
enabled: false
},
rangeSelector: {
enabled: false
},
navigator: {
// 下导航
enabled: true
},
scrollbar: {
enabled: true
},
// 数据提示框
tooltip: {
enabled: true,
backgroundColor: "white",
borderColor: "white",
style: {
color: "black",
zIndex:5,
}
},
yAxis: [
{
top: "0%",
height: "50%",
title: {
text: ""
},
endOnTick: true, // 强制结束于Y轴
// markers:false,
crosshair: true, // 横轴
dashStyle: "shortdot",
crosshair: {
width: 1.5,
color: "white",
dashStyle: "dash"
},
plotLines: [
{
width: 2,
color: "rgb(239, 197, 114)",
value: this.startValue,
dashStyle: "Dash",
label: {
text: `<span style="color:white;background:rgb(239, 197, 114);border-radius:3px;padding:2px 2px 0 2px;">${
this.startValue
}</span>`,
align: "right",
useHTML: true,
y: -5,
x: 0
},
zIndex: 3
}
],
gridLineWidth: 1,
gridZIndex: 1,
gridLineColor: "rgb(230, 230, 230)",
opposite: true
},
{
top: "56%",
height: "42%",
tickAmount:4,
}
],
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[
1,
Highcharts.Color(Highcharts.getOptions().colors[0])
.setOpacity(0)
.get("rgba")
]
]
},
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
},
candlestick: {
upLineColor: "transparent", // docs
upColor: "rgb(235, 106, 101)",
color: "rgb(121, 170, 111)"
},
macd: {
color: "rgb(199, 103, 103)",
marker: {
enabled: false,
lineColor: "rgb(39, 40, 61)",
states: {
hover: {
enabled: false
}
}
}
}
},
series: [
{
name:"MA",
type: "candlestick",
id: "candlestick",
data: this.data,
fillColor: "",
lineColor: "",
allowPointSelect: false,
index: 4,
colors: ["rgb(235, 106, 101)", "rgb(121, 170, 111)"],
events:{
drag(a){
}
}
},
{
name:"MA1",
type: "line",
yAxis: 0,
allowPointSelect: false,
index: 5,
data: this.data_.MA1,
},
{
name:"MA2",
type: "line",
yAxis: 0,
allowPointSelect: false,
index: 5,
data: this.data_.MA2,
},
{
name:"MA3",
type: "line",
yAxis: 0,
allowPointSelect: false,
index: 5,
data: this.data_.MA3,
},
{
name:"MA4",
type: "line",
yAxis: 0,
allowPointSelect: false,
index: 5,
data: this.data_.MA4,
},
{
// Two different zones:
type: 'macd',
yAxis: 1,
linkedTo: 'candlestick',
},
// {
// type: "macd",
// yAxis: 1,
// data:this.data,
// linkedTo: 'candlestick',
// // allowPointSelect: false,
// index: 4
// },
{
name:"DEA",
type: "line",
yAxis: 1,
allowPointSelect: false,
index: 5,
data: this.data_.DEA,
},
{
name:"DIF",
type: "line",
yAxis: 1,
allowPointSelect: false,
index: 5,
data: this.data_.DIF,
},
]
})

Different colour bars for different bars in a flot bar graph

I want to keep different colors for all bars in a flot bargraph. is it possible to do this? I found a way to do this , if i pass the color in a variable for every bars, now with the data i am passing the colours as well inside Variable d1_1,d1_2,d1_3,d1_4,d1_5,d1_6,d1_7 and passing in a variable data1.
I am writing the below-mentioned code, but it is not working, kindly suggest me how to do this.
My code is as mentioned below.
// Colors
var color01 = '#0000FF'; //blue
var color02 = '#FF0000'; //red
var color03 = '#32CD32'; //lime green
var d1_1 = [[{title[0], data[0], color: color01}],[{title[1], data[1],
color: color01}],[{title[2], data[2], color: color01}],[{title[3],
data[3], color: color01}],[{title[4], data[4], color: color01}],[{title[5],
data[5], color: color01}]];
var d1_2 = [{[title[0], data[6]], color: color02},{[title[1], data[7]],
color: color02},{[title[2], data[8]], color: color02},{[title[3],
data[9]], color: color02},{[title[4], data[10]], color: color02},
{[title[5], data[11]], color: color02}];
var d1_3 = [{[title[0], data[12]], color: color03},{[title[1], data[13]],
color: color03},{[title[2], data[14]], color: color03},{[title[3],
data[15]], color: color02},{[title[4], data[16]], color: color02},
{[title[5], data[17]], color: color03}];
var d1_4 = [{[title[0], data[18]], color: color02},{[title[1], data[19]],
color: color02},{[title[2], data[20]], color: color02},{[title[3],
data[21]], color: color03},{[title[4], data[22]], color: color02},
{[title[5], data[23]], color: color02}];
var d1_5 = [{[title[0], data[24]], color: color02},{[title[1], data[25]],
color: color02},{[title[2], data[26]], color: color02},{[title[3],
data[27]], color: color03},{[title[4], data[28]], color: color02},
{[title[5], data[29]], color: color02}];
var d1_6 = [{[title[0], data[30]], color: color02},{[title[1], data[31]],
color: color02},{[title[2], data[32]], color: color02},{[title[3],
data[33]], color: color03},{[title[4], data[34]], color: color02},
{[title[5], data[35]], color: color02}];
var d1_7 = [{[title[0], data[36]], color: color02},{[title[1], data[37]],
color: color02},{[title[2], data[38]], color: color02},{[title[3],
data[39]],
color: color02},{[title[4], data[40]], color: color03},{[title[5],
data[41]],
color: color02}];
var data1 = [
{
label: xaxis[0],
data: d1_1,
valueLabels: { show: true, verticalText: true },
bars: {
showValues: true,
show: true,
barWidth: 0.13,
fill: true,
lineWidth: 0,
order: 0,
//fillColor: "#0000FF",
fillColor: { colors: [ { opacity: 0.3 }, { opacity: 0.8 } ] }
},
//color: "#ffffff"
color: "#0000FF"
},
{
label: xaxis[1],
data: d1_2,
bars: {
showValues: true,
show: true,
barWidth: 0.13,
fill: true,
lineWidth: 0,
order: 1,
//fillColor: "#6495ED",
fillColor: { colors: [ { opacity: 0.3 }, { opacity: 0.8 } ] }
},
valueLabels: { show: true, verticalText: true },
//color: "#ffffff"
color: "#6495ED"
},
{
label: xaxis[2],
data: d1_3,
bars: {
showValues: true,
show: true,
barWidth: 0.13,
fill: true,
lineWidth: 0,
order: 2,
//fillColor: "#90EE90",
fillColor: { colors: [ { opacity: 0.3 }, { opacity: 0.8 } ] }
},
valueLabels: { show: true, verticalText: true },
//color: "#ffffff"
color: "#90EE90"
},
{
label: xaxis[3],
data: d1_4,
bars: {
showValues: true,
show: true,
barWidth: 0.13,
fill: true,
lineWidth: 0,
order: 3,
//fillColor: "#FF0000",
fillColor: { colors: [ { opacity: 0.3 }, { opacity: 0.8 } ] }
},
valueLabels: { show: true, verticalText: true },
//color: "#ffffff"
color: "#FF0000"
},
{
label: xaxis[4],
data: d1_5,
bars: {
showValues: true,
show: true,
barWidth: 0.13,
fill: true,
lineWidth: 0,
order: 4,
fillColor: "#f4b183",
fillColor: { colors: [ { opacity: 0.3 }, { opacity: 0.8 } ] }
},
valueLabels: { show: true, verticalText: true },
//color: "#ffffff"
color: "green"
},
{
label: xaxis[5],
data: d1_6,
bars: {
showValues: true,
show: true,
barWidth: 0.13,
fill: true,
lineWidth: 0,
order: 5,
//fillColor: "yellow",
fillColor: { colors: [ { opacity: 0.3 }, { opacity: 0.8 } ] }
},
valueLabels: { show: true, verticalText: true },
//color: "#ffffff"
color: "yellow"
},
{
label: xaxis[6],
data: d1_7,
bars: {
showValues: true,
show: true,
barWidth: 0.13,
fill: true,
lineWidth: 0,
order: 6,
//fillColor: "silver",
fillColor: { colors: [ { opacity: 0.3 }, { opacity: 0.8 } ] }
},
valueLabels: { show: true, verticalText: true },
//color: "#ffffff"
color: "silver"
}
,
{
label: "test"
}
];
var t1 = [];
for (var i = 0; i < tik.length; i += 1)
t1.push([i+1, tik[i]]);
function plot_bar_chart(data1){
p = $.plot("#placeholder", data1, {
xaxis: {
min: 0,
max: 6,
mode: "categories",
categories: { "PA_IN PROGRESS": 0.5, "PA_IN PROGRESS OPUS": 1.5, "PA_IN PROGRESS MICROWAVE": 2.5, "PA_COMPLETED": 3.5, "PA_CANCELLED": 4.5, "PA_TERMINATION ABNORMALLY": 5.5 },
tickLength: 0,
axisLabelUseCanvas: true,
alignTicksWithAxis: true,
font:{
size:12,
weight:"bold",
family:"sans-serif",
variant:"small-caps",
color: "#000000"
}
},
yaxis: {
axisLabel: 'Number of Projects',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 30,
axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
axisLabelPadding: 5
},
grid: {
hoverable: true,
clickable: false,
borderWidth: 1
},
legend: {
labelBoxBorderColor: "none",
position: "right"
},
series: {
shadowSize: 1,
},
});

How to get spacing between border and inner background color of a pie chart using highcharts?

By using the below code i got Pie chart as shown in this link: https://i.stack.imgur.com/WdyYA.png
But i need to get Pie Chart as shown in this link: https://i.stack.imgur.com/EscA8.png
Here is my code:
var highchartGraph = {
bindpieChart : function(percentage_c)
{
$('.piechart').highcharts({
chart: {
spacingBottom: -8,
spacingTop: -8,
spacingLeft: -8,
spacingRight: -8,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true,
type: 'pie',
width: null,
height: null,
backgroundColor: 'rgba(255, 255, 255, 0)',
},
title: {
text: percentage_c+'%',
align: 'center',
verticalAlign: 'middle',
style: {
color: '#FFF',
fontSize: '18px',
fontFamily: 'arial'
},
y: 3,
x: 20
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {
},
},
states: {
hover: {
enabled: false,
brightness: 0
}
}
},
pie: {
borderWidth: 2,
borderColor: "#6821A5"
}
},
series: [{
name: " ",
colorByPoint: true,
data: [{
name: "Unrestricted",
y: percentage_c,
color: '#6821A5',
tooltip: false
}, {
name: "Restricted",
y: 100 - percentage_c,
color: '#FFF',
dataLabels: {
enabled: false
}
}]
}]
});
}
}

You could add another series that will create the border.
Demo: http://jsfiddle.net/rxp0noj5/
var percentage_c = 75;
$('#container').highcharts({
chart: {
spacingBottom: -8,
spacingTop: -8,
spacingLeft: -8,
spacingRight: -8,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true,
type: 'pie',
width: null,
height: null,
backgroundColor: 'rgba(255, 255, 255, 0)',
},
title: {
text: percentage_c + '%',
align: 'center',
verticalAlign: 'middle',
style: {
color: '#FFF',
fontSize: '18px',
fontFamily: 'arial'
},
y: 3,
x: 20
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {},
},
states: {
hover: {
enabled: false,
brightness: 0
}
}
},
pie: {
borderWidth: 2,
borderColor: "none"
}
},
series: [{ // series for border
innerSize: '100%',
data: [1],
borderColor: 'red'
},{
size: '95%', // decresed size for padding between pie and border
name: " ",
colorByPoint: true,
data: [{
name: "Unrestricted",
y: percentage_c,
color: '#6821A5',
tooltip: false
}, {
name: "Restricted",
y: 100 - percentage_c,
color: 'none',
dataLabels: {
enabled: false
}
}]
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

Highcharts Uncaught TypeError: Cannot read property 'chart' of undefined

I am upgrading from Highcharts 3.0.7 to 4.2.5. Several charts that worked fine in 3.0.7 and throwing this error on reflow. Seems the reflow event is providing the wrong context. The context of the window, so the chart is undefined. Is there a way to fix this context?
Here is the chart code from my environment:
var ChartSize = {
SMALL: {
marginTop: 44,
marginLeft: 26,
marginRight: 26,
height: 226,
width: 290,
yAxis: {
height: 116
},
xAxis: {
plotLines: {
x: -30,
y: -26
},
offset: 32,
labels: {
y: 20,
fontSize: '11px'
},
y: 15
}
},
LARGE: {
marginTop: 75,
marginLeft: 28,
marginRight: 28,
height: 375,
yAxis: {
height: 216
},
xAxis: {
plotLines: {
x: -83,
y: -60
},
offset: 40,
labels: {
y: 25,
fontSize: '12px'
},
y: 20
}
}
}
...
{
chart: {
backgroundColor: 'transparent',
type: 'area',
marginTop: ChartSize[args.size].marginTop,
marginLeft: ChartSize[args.size].marginLeft,
marginRight: ChartSize[args.size].marginRight,
height: ChartSize[args.size].height,
width: ChartSize[args.size].width,
reflow: true,
events: {
load: function() {
that.onChartLoaded(this);
},
redraw: function() {
that.onChartLoaded(this);
}
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
area: {
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
},
symbol: 'circle'
},
lineWidth: 0
},
series: {
fillOpacity: 1
}
},
title: {
text: '',
margin: 0
},
tooltip: {
formatter: function() {
return that.getTitle(this.y) + "<br/>" + TimeUtil.formatTime(that.getSecondsOffset(this.x), that.timeFormat24Hour);
},
shared: true,
useHTML: true
},
xAxis: [{
type: 'datetime',
tickInterval: 3600 * 1000,
title: {
text: null
},
startOnTick: false,
maxPadding: 0,
min: min,
max: max,
labels: {
y: ChartSize[args.size].xAxis.labels.y,
autoRotation: false,
staggerLines: 1,
style: {
color: '#000000',
fontSize: ChartSize[args.size].xAxis.labels.fontSize
},
formatter: function() {
if (this.isFirst) {
return '<span class="first-time-label" ' + that.firstLabelStyle + '>' + TimeUtil.formatTime(that.getSecondsOffset(min), that.timeFormat24Hour) + '</span>';
} else if (this.isLast) {
var style = that.timeFormat24Hour ? 'style="margin-left: 6px"' : '';
return '<span class="last-time-label" style="margin-left: -5px" ' + that.lastLabelStyle + '>' + TimeUtil.formatTime(that.getSecondsOffset(max), that.timeFormat24Hour) + '</span>';
}
return '<a href="javascript:void(0)" style="color:#898989; font-size: 12px" title="'
+ TimeUtil.formatTime(that.getSecondsOffset(this.value), that.timeFormat24Hour) + '">●</a>';
},
useHTML: true
},
tickWidth: 0,
plotLines: [{
color: '#282828',
dashStyle: 'ShortDash',
value: sleepTime.getTime(),
width: 2,
label: {
text: '<div class="sleep-time-placeholder bed-time"></div>',
useHTML: true,
rotation: 0,
textAlign: 'left',
x: ChartSize[args.size].xAxis.plotLines.x,
y: ChartSize[args.size].xAxis.plotLines.y,
style: {
fontFamily: "'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif"
}
},
zIndex: 5,
padding: 0.5
},
{
color: '#282828',
dashStyle: 'ShortDash',
value: wakeTime.getTime(),
width: 2,
label: {
text: '<div class="awake-time-placeholder wake-time"></div>',
useHTML: true,
rotation: 0,
textAlign: 'left',
x: ChartSize[args.size].xAxis.plotLines.x,
y: ChartSize[args.size].xAxis.plotLines.y,
style: {
fontFamily: "'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif"
}
},
zIndex: 5
}]
},
{
type: 'datetime',
title: {
text: null
},
lineColor: '#C5C5C5',
linkedTo: 0,
offset: ChartSize[args.size].xAxis.offset,
startOnTick: true,
min: min,
labels: {
autoRotation: false,
align: 'left',
staggerLines: 1,
useHTML: true,
style: {
color: '#000000',
fontSize: ChartSize[args.size].xAxis.labels.fontSize
},
formatter: function() {
if(this.isLast) {
return '';
}
var date = DateParser.parseEpoch(this.value);
var dateStr = DateFormatter.formatMonthDay(date);
return '<span class="timeline_label">' + dateStr.toUpperCase() + '</span>';
},
y: ChartSize[args.size].xAxis.y
},
tickWidth: 1,
tickPosition: 'inside',
tickPositions: [ min, midnightTime.getTime(), max ]
}],
yAxis: [ {
gridLineColor: '#E6E6E6',
labels: {
enabled: false
},
title: {
text: ''
},
lineWidth: 0,
max: 3,
tickInterval: 1
} ],
legend: {
enabled: false
}
}
}

Creating a 1D chart using Highcharts

How do you create a one dimensional scatter plot like the one used at HBR site:
When I tried to replicate the same after going through the JS files of HBR, I'm getting the following :
I need to eliminate the second grid line on the y axis.
Below is the JS code I'm using :
$(function () {
$('#highchart').highcharts({
credits: {
enabled: !1
},
chart: {
type: "scatter",
height: 140,
width: 580,
renderTo: "chart"
},
title: {
style: {
color: "#000",
fontFamily: "Helvetica, Arial, sans-serif",
fontSize: "12px",
fontWeight: "bold",
textTransform: "uppercase",
whiteSpace: "normal"
},
text: "Test"
},
legend: {
text: null,
useHTML: !0,
x: 20,
align: "center",
itemStyle: {
color: "#000",
fontFamily: "Stationery, Helvetica, Arial, sans-serif",
fontSize: "8px",
fontWeight: "normal",
lineHeight: "10px",
textTransform: "uppercase"
},
borderWidth: 1,
enabled: !0,
itemMarginTop: 0,
itemMarginBottom: 0,
layout: "horizontal",
verticalAlign: "bottom"
},
xAxis: {
title: {
text: null,
},
min: 0,
max: 5,
labels: {
enabled: !1
},
tickLength: 0,
lineWidth: 0
},
yAxis: [{
max: 0,
min : 0,
minRange :0.1,
maxPadding: .01,
lineWidth: 0,
tickWidth: 2,
tickLength: 6,
labels: {
y: 3
},
title: {
text: "Opportunity for<br/>development",
rotation: 0,
align: "middle",
offset: 50,
style: {
color: "#000",
fontFamily: "Stationery, Helvetica, Arial, sans-serif",
fontSize: "10px",
fontWeight: "normal",
lineHeight: "10px",
textTransform: "uppercase"
}
},
labels: {
enabled: !1
},
tickWidth: 0,
tickLength: 0,
maxPadding: 0,
padding: 30,
gridLineWidth: 2
}, {
title: {
text: "Strength",
rotation: 0,
align: "middle",
offset: 50
},
opposite: !0
}],
plotOptions: {
scatter: {
events: {
legendItemClick: function () {
return !1
}
},
marker: {
radius: 8,
states: {
hover: {
enabled: !0
}
},
symbol: "circle"
},
tooltip: {
fontFamily: "Stationery, Helvetica, Arial, sans-serif",
headerFormat: "<b>{series.name}</b><br>",
pointFormat: "{point.x} out of 25"
}
}
},
series: [{
name: "How you scored",
color: "#4cb6e8",
data: [[3, 0]],
}, {
name: "Average",
color: "#b20303",
data: [[4, 0]],
zIndex: 8,
marker: {
symbol: "diamond"
}
}],
});
});

Use tickInterval option for yAxis object with a bigger value than (max-min) value
yAxis: [{
max: 0,
min: 0,
//...
tickInterval: 1, // put any number bigger than (max-min) value
JSFiddle demo