Charts & Graphs by Ritz7

🟆🟆🟆🟆🟆🟆🟆🟆🟆🟆🟆🟆🟆Set-Up🟆🟆🟆🟆🟆🟆🟆🟆🟆🟆🟆🟆🟆🟆
We have detailed video tutorials for each of the actions/elements we have in this plugin. Watch them to understand and use it at ease.


🟆🟆🟆🟆🟆🟆🟆🟆🟆🟆Installing the Plugin🟆🟆🟆🟆🟆🟆🟆🟆🟆🟆


✔ Log in to your Bubble account
✔ Go to Plugins
✔ Search for “Charts and Graphs by Ritz7”
✔ Install the plugin


🟆🟆🟆🟆🟆🟆🟆🟆🟆🟆🟆Using the Plugin🟆🟆🟆🟆🟆🟆🟆🟆🟆🟆🟆


🟆🟆 Elements 🟆🟆


➽ MyChart- Line/Bar/Area (Line Chart)

✔ Inputs:
 ➻ Chart Settings: It consists of chart title and types of chart where you have to select "Line".
 ➻ Bar Chart Options: Not applicable for line chart.
 ➻ Line/Area Chart Settings: It consists of line stroke which has 3 values - Smooth, Straight, Stepline. You can change the line width, X and Y axis settings.
 ➻ Colour Properties: Decorate the chart by giving colours to the visual data and the background of the chart.
 ➻ Advanced Customization: It consists of additional settings required to view chart in different designs such as opacity, toolbar, animation etc.
 ➻ Bar Chart Settings: Not applicable for line chart.
 ➻ Legend Settings: Align the legend of the chart in whichever direction you want.

✔ Outputs:
 ➻ Line chart created.

➸ Watch the video for the above action here: https://www.youtube.com/watch?v=0mamc3kkzsM


➽ MyChart- Line/Bar/Area (Bar Chart)

✔ Inputs:
 ➻ Chart Settings: It consists of chart title and types of chart where you have to select "Bar".
 ➻ Bar Chart Options: It consists of 3 options - horizontal, stacked and stacked(100%).
 ➻ Line/Area Chart Settings: Only applicable for line/area chart.
 ➻ Colour Properties: Decorate the chart by giving colours to the visual data and the background of the chart.
 ➻ Advanced Customization: It consists of additional settings required to view chart in different designs such as opacity, toolbar, animation etc.
 ➻ Bar Chart Settings: Here you can change the look of bars by changing border radius, height and width.
 ➻ Legend Settings: Align the legend of the chart in whichever direction you want.

✔ Outputs:
 ➻ Bar chart created.

➸ Watch the video for the above action here: https://www.youtube.com/watch?v=B5NrE-zOFt8


➽ MyChart- Line/Bar/Area (Area Chart)

✔ Inputs:
 ➻ Chart Settings: It consists of chart title and types of chart where you have to select "Area".
 ➻ Bar Chart Options: Not applicable for line/area chart.
 ➻ Line/Area Chart Settings: It consists of line stroke which has 3 values - Smooth, Straight, Stepline. You can change the line width, X and Y axis settings.
 ➻ Colour Properties: Decorate the chart by giving colours to the visual data and the background of the chart.
 ➻ Advanced Customization: It consists of additional settings required to view chart in different designs such as opacity, toolbar, animation etc.
 ➻ Bar Chart Settings: Not applicable for line/area chart.
 ➻ Legend Settings: Align the legend of the chart in whichever direction you want.

✔ Outputs:
 ➻ Area chart created.

➸ Watch the video for the above action here: https://www.youtube.com/watch?v=dIpCaZXP6lI


➽ MyChart-Boxplot

✔ Inputs:
 ➻ Chart Settings: It consists of chart title and types of chart where you have to select "Line".
 ➻ Bar Chart Options: Not applicable for line chart.
 ➻ Line/Area Chart Settings: It consists of line stroke which has 3 values - Smooth, Straight, Stepline. You can change the line width, X and Y axis settings.
 ➻ Colour Properties: Decorate the chart by giving colours to the visual data and the background of the chart.
 ➻ Advanced Customization: It consists of additional settings required to view chart in different designs such as opacity, toolbar, animation etc.
 ➻ Bar Chart Settings: Not applicable for line chart.
 ➻ Legend Settings: Align the legend of the chart in whichever direction you want.

✔ Outputs:
 ➻ Boxplot chart created.

➸ Watch the video for the above action here: https://www.youtube.com/watch?v=w-BzEIBhH6Y


➽ MyChart-Pie/Donut

✔ Inputs:
 ➻ Chart Settings: It consists of chart title and types of chart where there are two values - Pie, Donut.
 ➻ Pie/Donut Options: It consists of labels and data fields for pie/donut chart.
 ➻ Colour Properties: Decorate the chart by giving colours to the visual data and the background of the chart.
 ➻ Advanced Customization: It consists of additional settings required to view chart in different designs such as opacity, toolbar, animation etc.
 ➻ Bar Chart Settings: Not applicable for line chart.
 ➻ Legend Settings: Align the legend of the chart in whichever direction you want.

✔ Outputs:
 ➻ Pie/Donut chart created.

➸ Watch the video for the above action here: https://www.youtube.com/watch?v=poZgZ8RUkRs


➽ MyChart-Radar

✔ Inputs:
 ➻ Chart Settings: It consists of chart title.
 ➻ Radar Settings: It consists of labels and data series, series name, min and max y-axis values fields for radar chart.
 ➻ Colour Properties: Decorate the chart by giving colours to the visual data and the background of the chart.
 ➻ Advanced Customization: It consists of additional settings required to view chart in different designs such as opacity, toolbar, animation etc.
 ➻ Legend Settings: Align the legend of the chart in whichever direction you want.

✔ Outputs:
 ➻ Radar chart created.

➸ Watch the video for the above action here: https://www.youtube.com/watch?v=jjzfM8VCARY


➽ MyChart-Candlestick

✔ Inputs:
 ➻ Chart Settings: It consists of chart title.
 ➻ X-Axis Settings: It consists of x axis fields such as title, min and max x-axis values for candlestick chart.
 ➻ Y-Axis Settings: It consists of y axis fields such as title, min and max y-axis values, y-axis labels for candlestick chart.
 ➻ Chart Values: It consists of low, open, close and high values for showing a candle-like structure in the chart and date value in the x-axis for candlestick chart.
 ➻ Colour Properties: Decorate the chart by giving colours to the visual data and the background of the chart.
 ➻ Advanced Customization: It consists of additional settings required to view chart in different designs such as opacity, toolbar, animation etc.
 ➻ Legend Settings: Align the legend of the chart in whichever direction you want.

✔ Outputs:
 ➻ Candlestick chart created.

➸ Watch the video for the above action here: https://www.youtube.com/watch?v=F1sG7g29VBY


➽ MyChart-Scatter

✔ Inputs:
 ➻ Chart Settings: It consists of chart title.
 ➻ X-Axis Settings: It consists of x axis fields such as title, min and max x-axis values, x-values for scatter chart.
 ➻ Y-Axis Settings: It consists of y axis fields such as title, min and max y-axis values, y-axis labels and data for scatter chart.
 ➻ Colour Properties: Decorate the chart by giving colours to the visual data and the background of the chart.
 ➻ Advanced Customization: It consists of additional settings required to view chart in different designs such as opacity, toolbar, animation etc.
 ➻ Legend Settings: Align the legend of the chart in whichever direction you want.

✔ Outputs:
 ➻ Scatter chart created.

➸ Watch the video for the above action here: https://www.youtube.com/watch?v=1V0LjF3Jgl8


➽ MyChart-Bubble

✔ Inputs:
 ➻ Chart Settings: It consists of chart title and height and width of the chart.
 ➻ X-Axis Settings: It consists of x axis fields such as title, min and max x-axis values, x-values for bubble chart.
 ➻ Y-Axis Settings: It consists of y axis fields such as title, min and max y-axis values, y-axis labels and data for bubble chart.
 ➻ Colour Properties: Decorate the chart by giving colours to the visual data and the background of the chart.
 ➻ Advanced Customization: It consists of additional settings required to view chart in different designs such as opacity, toolbar, animation etc.
 ➻ Legend Settings: Align the legend of the chart in whichever direction you want.

✔ Outputs:
 ➻ Bubble chart created.

➸ Watch the video for the above action here: https://www.youtube.com/watch?v=wS4J4J5wZDg


➽ MyChart-Range

✔ Inputs:
 ➻ Chart Settings: It consists of chart title.
 ➻ X-Axis Settings: It consists of x axis fields such as title, min and max x-axis values, x-values for range chart.
 ➻ Y-Axis Settings: It consists of y axis fields such as title, y-axis labels, series labels and data for range chart.
 ➻ Colour Properties: Decorate the chart by giving colours to the visual data and the background of the chart.
 ➻ Advanced Customization: It consists of additional settings required to view chart in different designs such as opacity, toolbar, animation etc.
 ➻ Range Bar Chart Settings: It consists of border radius and height of the bar.
 ➻ Legend Settings: Align the legend of the chart in whichever direction you want.

✔ Outputs:
 ➻ Range bar chart created.

➸ Watch the video for the above action here: https://www.youtube.com/watch?v=DvjQ8lybNq4


➽ MyChart-Radial

✔ Inputs:
 ➻ Chart Settings: It consists of chart title.
 ➻ Chart Data: It consists of labels, data for radial bar chart.
 ➻ Radial Bar Settings: It consists of start and end angle values, margin, size and background of margin, linecap and track for radial bar chart.
 ➻ Colour Properties: Decorate the chart by giving colours to the visual data and the background of the chart.
 ➻ Advanced Customization: It consists of additional settings required to view chart in different designs such as opacity, toolbar, animation etc.
 ➻ Legend Settings: Align the legend of the chart in whichever direction you want.

✔ Outputs:
 ➻ Radial bar chart created.

➸ Watch the video for the above action here: https://www.youtube.com/watch?v=dYJ_JzQv290


➽ MyChart-Heatmap

✔ Inputs:
 ➻ Chart Settings: It consists of chart title and height and width of the chart.
 ➻ X-Axis Settings: It consists of x axis fields such as title, x-axis values for heatmap chart.
 ➻ Y-Axis Settings: It consists of y axis fields such as title, y-axis labels and data for heatmap chart.
 ➻ Colour Properties: Decorate the chart by giving colours to the visual data and the background of the chart. Also give the range of colour scale with the name of ranges.
 ➻ Advanced Customization: It consists of additional settings required to view chart in different designs such as opacity, toolbar, animation etc.
 ➻ Legend Settings: Align the legend of the chart in whichever direction you want.

✔ Outputs:
 ➻ Heatmap chart created.

➸ Watch the video for the above action here: https://www.youtube.com/watch?v=uUaEpzoT3ms


➽ MyChart-TreeMap

✔ Inputs:
 ➻ Chart Settings: It consists of chart title and height and width of the chart.
 ➻ Chart Data: It consists of labels and data for treemap chart.
 ➻ Colour Properties: Decorate the chart by giving colours to the visual data and the background of the chart. Also give the range of colour scale with the label for each blocks.
 ➻ Advanced Customization: It consists of additional settings required to view chart in different designs such as opacity, toolbar, animation etc.

✔ Outputs:
 ➻ TreeMap chart created.

➸ Watch the video for the above action here: https://www.youtube.com/watch?v=VtP_dt80INU