Boxes_PlotIn the world of data visualization, heatmaps are an invaluable tool for understanding complex datasets. They use color gradients to represent the values of individual data points, allowing users to quickly identify patterns, trends, and outliers in their data. In this post, we will delve into the history of heatmaps, and then discuss how its implemented.
The "Boxes_Plot" library is a powerful and versatile tool for visualizing multiple indicators on a trading chart using colored boxes, commonly known as heatmaps. These heatmaps provide a user-friendly and efficient method for analyzing the performance and trends of various indicators simultaneously. The library can be customized to display multiple charts, adjust the number of rows, and set the appropriate offset for proper spacing. This allows traders to gain insights into the market and make informed decisions.
Heatmaps with cells are interesting and useful for several reasons. Firstly, they allow for the visualization of large datasets in a compact and organized manner. This is especially beneficial when working with multiple indicators, as it enables traders to easily compare and contrast their performance. Secondly, heatmaps provide a clear and intuitive representation of the data, making it easier for traders to identify trends and patterns. Finally, heatmaps offer a visually appealing way to present complex information, which can help to engage and maintain the interest of traders.
History of Heatmaps
The concept of heatmaps can be traced back to the 19th century when French cartographer and sociologist Charles Joseph Minard used color gradients to visualize statistical data. He is well-known for his 1869 map, which depicted Napoleon's disastrous Russian campaign of 1812 using a color gradient to represent the dwindling size of Napoleon's army.
In the 20th century, heatmaps gained popularity in the fields of biology and genetics, where they were used to visualize gene expression data. In the early 2000s, heatmaps found their way into the world of finance, where they are now used to display stock market data, such as price, volume, and performance.
The boxes_plot function in the library expects a normalized value from 0 to 100 as input. Normalizing the data ensures that all values are on a consistent scale, making it easier to compare different indicators. The function also allows for easy customization, enabling users to adjust the number of rows displayed, the size of the boxes, and the offset for proper spacing.
One of the key features of the library is its ability to automatically scale the chart to the screen. This ensures that the heatmap remains clear and visible, regardless of the size or resolution of the user's monitor. This functionality is essential for traders who may be using various devices and screen sizes, as it enables them to easily access and interpret the heatmap without needing to make manual adjustments.
In order to create a heatmap using the boxes_plot function, users need to supply several parameters:
1. Source: An array of floating-point values representing the indicator values to display.
2. Name: An array of strings representing the names of the indicators.
3. Boxes_per_row: The number of boxes to display per row.
4. Offset (optional): An integer to offset the boxes horizontally (default: 0).
5. Scale (optional): A floating-point value to scale the size of the boxes (default: 1).
The library also includes a gradient function (grad) that is used to generate the colors for the heatmap. This function is responsible for determining the appropriate color based on the value of the indicator, with higher values typically represented by warmer colors such as red and lower values by cooler colors such as blue.
Implementing Heatmaps as a Pine Script Library
In this section, we'll explore how to create a Pine Script library that can be used to generate heatmaps for various indicators on the TradingView platform. The library utilizes colored boxes to represent the values of multiple indicators, making it simple to visualize complex data.
We'll now go over the key components of the code:
grad(src) function: This function takes an integer input 'src' and returns a color based on a predefined color gradient. The gradient ranges from dark blue (#1500FF) for low values to dark red (#FF0000) for high values.
boxes_plot() function: This is the main function of the library, and it takes the following parameters:
source: an array of floating-point values representing the indicator values to display
name: an array of strings representing the names of the indicators
boxes_per_row: the number of boxes to display per row
offset (optional): an integer to offset the boxes horizontally (default: 0)
scale (optional): a floating-point value to scale the size of the boxes (default: 1)
The function first calculates the screen size and unit size based on the visible chart area. Then, it creates an array of box objects representing each data point. Each box is assigned a color based on the value of the data point using the grad() function. The boxes are then plotted on the chart using the box.new() function.
Example Usage:
In the example provided in the source code, we use the Relative Strength Index (RSI) and the Stochastic Oscillator as the input data for the heatmap. We create two arrays, 'data_1' containing the RSI and Stochastic Oscillator values, and 'data_names_1' containing the names of the indicators. We then call the 'boxes_plot()' function with these arrays, specifying the desired number of boxes per row, offset, and scale.
Conclusion
Heatmaps are a versatile and powerful data visualization tool with a rich history, spanning multiple fields of study. By implementing a heatmap library in Pine Script, we can enhance the capabilities of the TradingView platform, making it easier for users to visualize and understand complex financial data. The provided library can be easily customized and extended to suit various use cases and can be a valuable addition to any trader's toolbox.
Library "Boxes_Plot"
boxes_plot(source, name, boxes_per_row, offset, scale)
Parameters:
source (float ) : - an array of floating-point values representing the indicator values to display
name (string ) : - an array of strings representing the names of the indicators
boxes_per_row (int) : - the number of boxes to display per row
offset (int) : - an optional integer to offset the boxes horizontally (default: 0)
scale (float) : - an optional floating-point value to scale the size of the boxes (default: 1)
Heatmap
DataChartLibrary "DataChart"
Library to plot scatterplot or heatmaps for your own set of data samples
draw(this)
draw contents of the chart object
Parameters:
this : Chart object
Returns: current chart object
init(this)
Initialize Chart object.
Parameters:
this : Chart object to be initialized
Returns: current chart object
addSample(this, sample, trigger)
Add sample data to chart using Sample object
Parameters:
this : Chart object
sample : Sample object containing sample x and y values to be plotted
trigger : Samples are added to chart only if trigger is set to true. Default value is true
Returns: current chart object
addSample(this, x, y, trigger)
Add sample data to chart using x and y values
Parameters:
this : Chart object
x : x value of sample data
y : y value of sample data
trigger : Samples are added to chart only if trigger is set to true. Default value is true
Returns: current chart object
addPriceSample(this, priceSampleData, config)
Add price sample data - special type of sample designed to measure price displacements of events
Parameters:
this : Chart object
priceSampleData : PriceSampleData object containing event driven displacement data of x and y
config : PriceSampleConfig object containing configurations for deriving x and y from priceSampleData
Returns: current chart object
Sample
Sample data for chart
Fields:
xValue : x value of the sample data
yValue : y value of the sample data
ChartProperties
Properties of plotting chart
Fields:
title : Title of the chart
suffix : Suffix for values. It can be used to reference 10X or 4% etc. Used only if format is not format.percent
matrixSize : size of the matrix used for plotting
chartType : Can be either scatterplot or heatmap. Default is scatterplot
outliersStart : Indicates the percentile of data to filter out from the starting point to get rid of outliers
outliersEnd : Indicates the percentile of data to filter out from the ending point to get rid of outliers.
backgroundColor
plotColor : color of plots on the chart. Default is color.yellow. Only used for scatterplot type
heatmapColor : color of heatmaps on the chart. Default is color.red. Only used for heatmap type
borderColor : border color of the chart table. Default is color.yellow.
plotSize : size of scatter plots. Default is size.large
format : data representation format in tooltips. Use mintick.percent if measuring any data in terms of percent. Else, use format.mintick
showCounters : display counters which shows totals on each quadrants. These are single cell tables at the corners displaying number of occurences on each quadrant.
showTitle : display title at the top center. Uses the title string set in the properties
counterBackground : background color of counter table cells. Default is color.teal
counterTextColor : text color of counter table cells. Default is color.white
counterTextSize : size of counter table cells. Default is size.large
titleBackground : background color of chart title. Default is color.maroon
titleTextColor : text color of the chart title. Default is color.white
titleTextSize : text size of the title cell. Default is size.large
addOutliersToBorder : If set, instead of removing the outliers, it will be added to the border cells.
useCommonScale : Use common scale for both x and y. If not selected, different scales are calculated based on range of x and y values from samples. Default is set to false.
plotchar : scatter plot character. Default is set to ascii bullet.
ChartDrawing
Chart drawing objects collection
Fields:
properties : ChartProperties object which determines the type and characteristics of chart being plotted
titleTable : table containing title of the chart.
mainTable : table containing plots or heatmaps.
quadrantTables : Array of tables containing counters of all 4 quandrants
Chart
Chart type which contains all the information of chart being plotted
Fields:
properties : ChartProperties object which determines the type and characteristics of chart being plotted
samples : Array of Sample objects collected over period of time for plotting on chart.
displacements : Array containing displacement values. Both x and y values
displacementX : Array containing only X displacement values.
displacementY : Array containing only Y displacement values.
drawing : ChartDrawing object which contains all the drawing elements
PriceSampleConfig
Configs used for adding specific type of samples called PriceSamples
Fields:
duration : impact duration for which price displacement samples are calculated.
useAtrReference : Default is true. If set to true, price is measured in terms of Atr. Else is measured in terms of percentage of price.
atrLength : atrLength to be used for measuring the price based on ATR. Used only if useAtrReference is set to true.
PriceSampleData
Special type of sample called price sample. Can be used instead of basic Sample type
Fields:
trigger : consider sample only if trigger is set to true. Default is true.
source : Price source. Default is close
highSource : High price source. Default is high
lowSource : Low price source. Default is low
tr : True range value. Default is ta.tr
