I have a use case where I pull and plot Forex data in the form of ask and bid on the graph and this is based on minute, hour or day candlesticks and I am only plotting the closing value for bid and ask as a spline.
Issue
The endpoints that I am using their Forex data feed is not available from Friday 8pm to Sunday 9pm. Let's say I have the following use case
Plot a 200 data points (i.e. hourly candle) on the graph at a time, on new candle phase out the oldest and plot the newest
The X-Axis is the data point's datetime in UTC ISO Format
The Y-Axis is the value of ask and bid
At a time the graph shows 4.1 days worth of hourly candle
The graph is pretty and smooth when the datetime on x-axis do not have any gaps. The candle timestamps are returned in the following form
2018-06-29T16:00:00.000000000Z
2018-06-29T17:00:00.000000000Z
2018-06-29T19:00:00.000000000Z
2018-06-29T20:00:00.000000000Z (Friday last candle 8pm)
2018-07-01T21:00:00.000000000Z (Sunday first candle 9pm)
2018-07-01T22:00:00.000000000Z
2018-07-01T23:00:00.000000000Z
2018-07-02T00:00:00.000000000Z
As soon as there is a gap (around 47-49 hours) everything gets compressed to accommodate for the stretched part of the graph as shown below (Using plotly.js)
Mostly, financial graphs do not show the gap. For example, looking at the TradingView interactive chart you will see the following for weekend
If you know how to tackle this issue with open source charting libraries (excluding TradingView) then please share your solution.
TL;DR
Based on my findings, you can exclude the gaps using HighStock of Highcharts library. Highcharts is open source and only free to use for Non-commercial use, for more details see highcharts licensing
plotly.js
I initially started off with plotly.js because it really is a very good charting library to be honest. After I came across the datetime gap issue (see screenshot in question) on x-axis I researched for solution and came across the following issues
https://community.plot.ly/t/tickformat-without-weekends/1286/5 (forum)
https://github.com/plotly/plotly.js/issues/1382 (locked github thread)
https://community.plot.ly/t/x-axis-without-weekends/1091/2
As per the Github issue link above, this is not achievable at the moment for how the datetime is handled on x-axis. There are workaround (like 3rd link above) but, I tried some and it either didn't work or I lost some piece of information.
I came to the conclusion that even though plotly is a great library, it simply cannot help me in this case. If you think it does, please share your solution :)
C3.js
After some more research of charting libraries, I give C3.js a try and after editing their live demo example with datetime for x-axis I observed the same weekend gap issue (see below)
I did not bother researching why and that's probably because of being based on D3.js just like plotly.js. If you think the datetime gap can be handled with C3.js then please feel free to share your solution.
Highcharts
I finally came across the family of Highxxxxx charting library and at first look it looked so pretty and offered all the functionalities that I wanted. I tried Highchart and I got the same weekend gap issue
Well, I started to think that the only solution is to NOT TO PLOT the datetime in x-axis at all and somehow show the datetime in tooltip and that seem to do the job as shown below
But, being too stubborn to give up I continued my research. I really wanted to get the charting done like TradingView and other stock visualization.
I decided to do some more research and little did I knew that I was so so close to a solution by the very same charting library Highcharts and it is called HighStock
Highstock of Highcharts
HighStock by default takes care of the gaps as shown below
I used the following piece of Javascript
Highcharts.setOptions({
global: {
useUTC: false
}
});
Highcharts.StockChart('chart', {
chart: {
type: 'spline',
events: {
load: function () {
console.log('Highcharts is Loaded! Creating a reference to Chart dom.')
//store a reference to the chart to update the data series
var index=$("#chart").data('highchartsChart');
highchartRef = Highcharts.charts[index]; //global var
//Initiating the data pull here
}
}
},
title: {
text: 'Chart title'
},
series: [
{
name: 'Ask',
data: [],
tooltip: {
valueDecimals: 7
},
marker: {
enabled: true
}
},
{
name: 'Bid',
data: [],
tooltip: {
valueDecimals: 7
},
marker: {
enabled: true
}
}
]
});
There you have it, a gapless (not sure if it is a real word) financial chart with datetime x-axis for financial data.
Libraries I did not try
I have researched but, did not try the following charting libraries
Google charts (didn't feel right for unknown reasons)
Chartist (didn't see much of interactivity and financial related chart types and examples
Chartjs (same as Chartist)
TradingView (I give up after reading their terms of use - weird clause, my point of view)
A majority of others that lacked the level of documentation, interactivity, finance-related charts like Plotly and Highcharts.
Final thought
I found Highcharts to be
Well documented
A ton of jsfiddles examples around
Lots of useful SO answers
Pretty and very functional
Many options
Easy to use
Similar SO questions relating to gaps
How can I hide data gaps in plotly?
HighCharts datetime xAxis without missing values (weekends) (Highcharts)
Remove weekend gaps in gnuplot for candlestick chart (candlestick-chart, gunplot)
How to remove gaps in C3 timeseries chart? (c3/d3 - fiddles are not working so its hard to see the solution)
How to remove weekends dates from x axis in dc js chart (c3.js - the gap is some gap)
Plotly is now supporting to hide weekend and holidays in chart with help of rangebreaks. check this link:https://plotly.com/python/time-series/ go to the section:"Hiding Weekends and Holidays"
Below is section copied from this link, example is for plotly.express but it also works for plotly.graph_objects
Hiding Weekends and Holidays
The rangebreaks attribute available on x- and y-axes of type date can be used to hide certain time-periods. In the example below, we show two plots: one in default mode to show gaps in the data, and one where we hide weekends and holidays to show an uninterrupted trading history. Note the smaller gaps between the grid lines for December 21 and January 4, where holidays were removed. Check out the reference for more options: https://plotly.com/python/reference/#layout-xaxis-rangebreaks
import plotly.express as px
import pandas as pd
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv')
fig = px.scatter(df, x='Date', y='AAPL.High', range_x=['2015-12-01', '2016-01-15'],
title="Default Display with Gaps")
fig.show()
Display without Gaps
import plotly.express as px
import pandas as pd
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv')
fig = px.scatter(df, x='Date', y='AAPL.High', range_x=['2015-12-01', '2016-01-15'],
title="Hide Gaps with rangebreaks")
fig.update_xaxes(
rangebreaks=[
dict(bounds=["sat", "mon"]), #hide weekends
dict(values=["2015-12-25", "2016-01-01"]) # hide Christmas and New Year's
]
)
fig.show()
According to documentation
try to add this before fig.show()
fig.update_xaxes(
rangebreaks=[
dict(bounds=["sat", "sun"]), #hide weekends
]
)
or
fig.layout.xaxis.type = 'category'
Using category as the xaxis type worked for me quite nicely (notice the go.Layout object):
import plotly.graph_objects as go
layout = go.Layout(
xaxis=dict(
type='category',
)
)
fig = go.Figure(data=[go.Candlestick(x=self.price_df.index.to_series(),
open=self.price_df[e.OHLCV.OPEN.value],
high=self.price_df[e.OHLCV.HIGH.value],
low=self.price_df[e.OHLCV.LOW.value],
close=self.price_df[e.OHLCV.CLOSE.value])],
layout=layout)
fig.show()
First of all, no need to quit on Plotly. The use of rangebreaks is indeed the tool to use, but that’s one side of it. I say this because for stock data bounds aren't practical compared to values, but you would be specifying dates for many holidays per year, and most of them change from one year to the other. So use values for rangebreaks and feed it with a list of every date that you don’t have in the CSV file you are loading. In case you need a bigger push to solve this, what I mean is taking the ‘date’ column aside, looping through it, and appending dates that are not there in another list. Then you can go fig.update_xaxes(rangebreaks=[dict(values=mylistofdates)])
Hope this brings you back to Plotly!
To remove empty columns such as Weekends from Financial Data using plotly ,Use below code.
Code-
import plotly.express as px
#Daily Percentage change in Nifty 50 Index
daily_returns = np.log(1+df_close.pct_change())*100
fig = px.bar(daily_returns,y = "Close", orientation='v')
fig.update_xaxes( rangeslider_visible=True, rangebreaks=[
dict(bounds=["sat", "mon"]), #hide weekends
])
fig.update_layout(
title='Nifty 50 Daily Returns in %',
yaxis_title='Daily % Change')
fig.update_layout( xaxis_tickformat = ' %d %B (%a)<br> %Y')
fig.show()
Snap-
I have the following result set giving me a specific status of an item . I need to build a SSRS 2015 Gantt chart to represent this data. I am having difficulty getting the data to display.
Result Set: StatusDate,Status,BegDate,EndDate, StatusDays
In the chart, I want the category to be on monthly intervals of the range provided (BegDate – EndDate) and the series to be each DAY in the range provided (BegDate – EndDate).
The bars should represent the item being Up or Down with “Up” being Green and “Down” being black for each day (x-axis) of each month (y-axis).
Hoped for Results
The current preview shows the X & Y axis' correctly, but does not show any "bars" to represent the data.
This is my first chart using SSRS and I am quite lost. Does anyone know where I can get a true tutorial on Range Bar Charts for SSRS 2015 or how I might overcome this “data Display” challenge I am stuck on? I appreciate any direction / guidance offered.
This issue was ultimately resolved by #AlanSchofield through another (and probably more clear) question, found here.
After choosing the correct chart, setting the correct properties, and determining the correct values I was able to get the chart I needed, but the behavior was still off. It would not show the a status more than once.
To fix this, and simply put, I needed to sort my data using Dense_Rank and then add the new "sort" column to my Series Group in the Chart properties. Worked like a charm!
Also got some useful guidelines on this blog post.
Tool tip in SSRS is showing random junk values when hovered over chart area or even sometimes on the data points or plots. Here are some images to illustrate the issue. My question is - is this a bug in ssrs or are there some property settings I can set or is it actually related to my data.. Please help. Many Thanks!
PS: Sorry couldn't add the images because of reputation constraints.
Thank you Chris for the suggestion. I found the solution for this question. Next time onward I'll follow that.
The Solution:
The junk values of tooltip were nothing but values that had either been set or had got set at various levels of the chart- chart area , plot area, series etc. I just had to remove all except the series tooltip. It works fine now.
I've found a lot of good documentation and tried a lot of different formatting but can't seem to get the dates actually ticking.
I realize my example code is a bit complicated but it's doing everything I wanted it to do and I figured I could go back and do the ticking within in a week (I have a filter that changes it to 30 days and 3 months, and all the dates are displayed so I really need to figure out how to properly format the axis for ticks to function:
http://jsbin.com/xacugeko/1/
I tried tickformat but it would just break, I also tried to set the scale to time instead of ordinal but was having trouble getting that to work as well.
New to D3 any assistance is appreciated.
I have a chart in SSRS that needs to have a flexible x-axis grid line interval (show at most 6 major grid lines), and I'm using the formula I've used dozens of times before:
=Floor(Count(Fields!Date.Value)/5)
However, for some strange reason, the chart only ends up showing the first value on the x-axis. The line gets plotted correctly, but there are no grid lines and no x-axis labels save the first one.
What's going on?
Well I found the answer. The data set I'm using has multiple fields, some of which are not being used by the chart. However, because the column I'm grouping on may have several repeat values, I had to change Count() to CountDistinct(). This resolved the issue.