I have a question. I want to create horizontal stacked bar chart which will show status code (filled with corresponding color) in timeline.
How it should look
Actually I have created plugin for chart like this (effect is visible on the picture) but it's far away from perfection (no tooltips etc, it's only canvas drawing). I'm wondering if it's possible to achieve this chart without my own controller, maybe am I missing sth from docs?
Also I tried to create it with floating bar chart but I have to create a new dataset for every status change, here is my dataset definition and full code on jsfiddle.
const options = {
data: {
datasets: [{
label: 'Status 1',
data: [
[new Date('2021-09-11T00:00:00'), new Date('2021-09-13T00:00:00')]
],
backgroundColor: "red",
},
{
label: 'Status 2',
data: [
[new Date('2021-09-14T00:00:00'), new Date('2021-09-15T00:00:00'), ]
],
backgroundColor: "blue",
},
{
label: 'Status 3',
data: [
[new Date('2021-09-16T00:00:00'), new Date('2021-09-18T00:00:00')]
],
backgroundColor: "orange",
},
{
label: 'Status 2',
data: [
[new Date('2021-09-18T00:00:00'), new Date('2021-09-18T10:00:00')]
],
backgroundColor: "blue",
},
{
label: 'Status 1',
data: [
[new Date('2021-09-18T10:00:00'), new Date('2021-09-22T00:00:00')]
],
backgroundColor: "red",
}]
}
}
https://jsfiddle.net/7esko3vw/
Any ideas?
I added some dummy series in the highcharts, but I want them to be invisible at all times, independent of whether I click their legends.
series.push({
name: 'dummyPoint',
fontFamily: 'Arial',
data: [dummyPointX, dummyPointY],
visible: false,
showInLegend: true
})
The problem with the above code is that the legends are displayed greyed out by default, and it will display dummies upon the click of legends. How do I prevent it from greying out by default and keep the dummy points invisible at all times?
You can do that with the series.events.legend.itemClick - Api Documentation
series: [{
name: 'Point 1',
color: '#00FF00',
data: [1, 2.5, 3, 4, 3.2],
visible: false,
showInLegend: true,
events: {
legendItemClick: function() {
return false;
}
}
}
edit : Completly invisible legend
Updated Fiddle
You can do a little trick to achieve it: create a "phantom" series that has no data and link the hidden series to it. Legend item will be generated for the phantom series and will serve for the hidden series too. Then disable the default action for this item in events.legendItemClick:
series: [{
// Phantom series - created just to generate legend item
name: 'Series 1',
events: {
legendItemClick: function(e) {
e.preventDefault();
}
}
}, {
data: [3, 0],
visible: false,
name: 'Series 1',
linkedTo: ':previous',
}, {
data: [1, 2],
name: 'Series 2'
}]
Live demo: http://jsfiddle.net/BlackLabel/dc4L30zv/
API references:
https://api.highcharts.com/highcharts/series.line.linkedTo
https://api.highcharts.com/highcharts/series.line.events.legendItemClick
So I'm looking for a way to make one of the lines on my chart NOT smooth and the other smooth. There is a master option to make every line on the chart smooth but not a particular line that I know of.
Here is my chart of what it looks like
PS. Im using JQ Plots http://www.jqplot.com/index.php
Here is my JS code.
//STOCK HIGH VS LOW
var line1 = [['2017-11-27',175.0800],['2017-11-28',174.8700],['2017-11-29',172.9200],['2017-11-30',172.1400],['2017-12-01',171.6700],['2017-12-04',172.6200],['2017-12-05',171.5200],['2017-12-06',170.2047],['2017-12-07',170.4400],['2017-12-08',171.0000],['2017-12-11',172.8900],['2017-12-12',172.3900],['2017-12-13',173.5400],['2017-12-14',173.1300],['2017-12-15',174.1700],['2017-12-18',177.2000],['2017-12-19',175.3900],['2017-12-20',175.4200],['2017-12-21',176.0200],['2017-12-22',175.4240],['2017-12-26',171.4700],['2017-12-27',170.7800],['2017-12-28',171.8500],['2017-12-29',170.5900],['2018-01-02',172.3000],['2018-01-03',174.5500],['2018-01-04',173.4700],['2018-01-05',175.3700],['2018-01-08',175.6100],['2018-01-09',175.0600],['2018-01-10',174.3000],['2018-01-11',175.4900],['2018-01-12',177.3600],['2018-01-16',179.3900],['2018-01-17',179.2500],['2018-01-18',180.1000],['2018-01-19',179.5800],['2018-01-22',177.7800],['2018-01-23',179.4400],['2018-01-24',177.3000],['2018-01-25',174.9500],['2018-01-26',172.0000],['2018-01-29',170.1600],['2018-01-30',167.3700],['2018-01-31',168.4417],['2018-02-01',168.6200],['2018-02-02',166.8000],['2018-02-05',163.8800],['2018-02-06',163.7200],['2018-02-07',163.4000],['2018-02-08',161.0000],['2018-02-09',157.8900]];
var line2 = [['2017-11-27',173.3400],['2017-11-28',171.8600],['2017-11-29',167.1600],['2017-11-30',168.4400],['2017-12-01',168.5000],['2017-12-04',169.6300],['2017-12-05',168.4000],['2017-12-06',166.4600],['2017-12-07',168.9100],['2017-12-08',168.8200],['2017-12-11',168.7900],['2017-12-12',171.4610],['2017-12-13',172.0000],['2017-12-14',171.6500],['2017-12-15',172.4600],['2017-12-18',174.8600],['2017-12-19',174.0900],['2017-12-20',173.2500],['2017-12-21',174.1000],['2017-12-22',174.5000],['2017-12-26',169.6790],['2017-12-27',169.7100],['2017-12-28',170.4800],['2017-12-29',169.2200],['2018-01-02',169.2600],['2018-01-03',171.9600],['2018-01-04',172.0800],['2018-01-05',173.0500],['2018-01-08',173.9300],['2018-01-09',173.4100],['2018-01-10',173.0000],['2018-01-11',174.4900],['2018-01-12',175.6500],['2018-01-16',176.1400],['2018-01-17',175.0700],['2018-01-18',178.2500],['2018-01-19',177.4100],['2018-01-22',176.6016],['2018-01-23',176.8200],['2018-01-24',173.2000],['2018-01-25',170.5300],['2018-01-26',170.0600],['2018-01-29',167.0700],['2018-01-30',164.7000],['2018-01-31',166.5000],['2018-02-01',166.7600],['2018-02-02',160.1000],['2018-02-05',156.0000],['2018-02-06',154.0000],['2018-02-07',159.0685],['2018-02-08',155.0300],['2018-02-09',150.2400]];
var plot2 = $.jqplot('chart1', [line1, line2], {
title: 'AAPL High vs Low',
seriesDefaults: {
rendererOptions: {
//////
// Turn on line smoothing. By default, a constrained cubic spline
// interpolation algorithm is used which will not overshoot or
// undershoot any data points.
//////
smooth: true
}
},
legend: { show: true },
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: { formatString: '%b %#d, %#I %p' },
min: 'November 20 2017',
tickInterval: '1 month'
}
},
highlighter: {
show: true,
sizeAdjust: 7.5
},
canvasOverlay: {
show: true,
objects: [
{horizontalLine: {
name: 'average',
y: 171.21, //**AVERAGE_FLOAT_VALUE**
lineWidth: 2,
color: '#FF5555',
shadow: false
}}
]
},
series: [{ lineWidth: 4,
markerOptions: { style: 'square' }
}],
series: [
{ label: 'High' },
{ label: 'Low' }
],
});
If it cant be done in JQ Plots, do you guys know of any other charts that can do this.
Pretty much Im looking for a chart to look like this in the end.
Replying kinda late but..
Yes you can do it in jqplot as well.
Instead of using a seriesDefaults option, go directly and add it in each series you want:
series: [
{
// custom line
lineWidth:2,
markerOptions: { style:'diamond' }
},
{
// here is your smooth line
rendererOptions: {
smooth: true,
},
markerOptions: { style:"circle" }
}
]
Disclaimer: I read it on the internet . . . but apparently d3 can do this (https://gist.github.com/thiyagu-p/3925981). Also, if you Google 'd3 moving average and volume' you get some interesting results. YMMV.
I don't know about jqPlot but you could certainly do this with RGraph:
https://www.rgraph.net/demos/svg-line-trading.html
And if you wanted the gray decorative bar at the back you could use another Bar chart to get this effect before drawing the Line charts and give it some dummy data of:
[1,0,1,0,1,0,1,0,1,0,1,0,1,0,1]
Hi every one I am using Highchart of columnrange type, i got chart from
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/columnrange/ and modified it according to my need , now i need months name in the x-axis and y-axis values are fixed . Currently i am not able to change the x-axis numbers to months.
My script is as :
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Employee Bill Pending Detail'
},
subtitle: {
text: 'Month Wise'
},
xAxis: {
categories: ['Bank Bill Pending', 'Clam Pending']
},
yAxis: {
title: {
text: 'Session (2013-14)'
}
},
tooltip: {
valueSuffix: ''
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y ;
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Months',
data: [
[1, 4], // Here the [1,4] denotes months between 'Jan' & 'Apr'.
[2, 8] // Here the [2,8] denotes months between 'Feb' & 'Aug'.
]
}]
});
});
Any help will be highly appreciable.
This is actually really easy. Relevant API documenation:
dateFormat()
yAxis.type
You need to set your data up like this (or use explicit js timestamp):
series: [{
name: 'Months',
data: [
[Date.UTC(2013, 0, 1), Date.UTC(2013, 3, 1)], // Here the [1,4] denotes months between 'Jan' & 'Apr'.
[Date.UTC(2013, 2, 1), Date.UTC(2013, 7, 1)] // Here the [2,8] denotes months between 'Feb' & 'Aug'.
]
}]
Note that Data.UTC() is zero based so that January is '0'. The last element in that list is the date. Since your data is just by month I made it '1'. You can have whatever you want here as the display on the dataLabel and the tooltip is handled with the dateFormat.
Example jsFiddle.