<aside> ℹ️

Link: https://new-graphing-component.s3.us-west-2.amazonaws.com/index.html

Demo Lesson: Author | Preview

⚠️ Reminder: Only enter in READ ONLY

</aside>

⏱️ Quick Start

🧰 Functionality Overview

♿ Accessibility

Feature Status
Keyboard ✅
Screen Reader ✅
Touch ✅

🧠 Trap States & Use Cases

🔹 Initial States (Setup)

Scenario CAPI
Enable or disable the entire chart stage.graphingComponent.EnableEditing Boolean = false (or true)
Enable or disable point moving stage.graphingComponent.EnablePointMoving Boolean = false (or true)
Enable or disable point plotting stage.graphingComponent.EnablePointPlotting Boolean = false (or true)
Enable or disable point removal stage.graphingComponent.EnablePointRemoval Boolean = false (or true)
Display specific points on the plot stage.graphingComponent.Points.All Array = ["(5;-8)","(13;10)","(-7;18)","(31;-27)","(-27;-22)","(37;22)","(-33;24)"]
Remove all points from the plot stage.graphingComponent.Points.All Array = []

✅ Correct States

Scenario CAPI
Check if all expected points are plotted stage.graphingComponent.Points.All Array = ["(5;-8)","(13;10)","(-7;18)","(31;-27)","(-27;-22)","(37;22)","(-33;24)"]
Check if some expected points are plotted stage.graphingComponent.Points.All Array Contains ["(5;-8)","(13;10)"]
Check if any plotted points are larger (or smaller) than a specific value stage.graphingComponent.xMax Number > 42
stage.graphingComponent.xMax Number < 42
Check if they plotted the correct number of points stage.graphingComponent.points.count Number = 7

❌ Incorrect States

Scenario CAPI
Incomplete: didn’t plot any points stage.graphingComponent.points.count Number = 0
Incomplete: didn’t plot enough points stage.graphingComponent.points.count Number != 7
Incorrect: didn’t plot the correct points stage.graphingComponent.Points.All Array != ["(5;-8)","(13;10)","(-7;18)","(31;-27)","(-27;-22)","(37;22)","(-33;24)"]
Incorrect: Missing a specific point stage.graphingComponent.Points.All Array Not Contains ["(5;-8)"]

🔄 Mutate States

Scenario CAPI
Show correct answer stage.graphingComponent.Points.All Array = ["(5;-8)","(13;10)","(-7;18)","(31;-27)","(-27;-22)","(37;22)","(-33;24)"]
Plot some (or all) points for them stage.graphingComponent.Points.All Array = ["(5;-8)","(13;10)"]
Disable the graph stage.graphingComponent.EnableEditing Boolean = false

🔗 Full Documentation and CAPI Table

CAPI Name Type Default Description Notes/Examples
CSS string this is where we can enter in custom CSS to style the component. It can either be an @import link or pure CSS. This is not to be confused with customCssClass.
EnableEditing boolean true enable or disable editing the component
EnablePointMoving boolean true enable/disable the ability to move points
EnablePointPlotting boolean true enable/disable the ability to plot points
EnablePointRemoval boolean true enable/disable the ability to remove/delete points
LockChart boolean false When true, it prevents the user from moving around the plot or zooming in/out
Mode enum (line, point) line Switched between line plot and point/scatter plot
TooltipEnabled boolean true When true, tooltips for the points are enabled
line.equationVisible boolean true When true and in line mode, shows the equation of the line (if line type is best fit)
line.interceptsVisible boolean true When true and in line mode, shows the x and y intercepts of the line (if line type is best fit)
line.riseRunVisible boolean true When true and in line mode, shows the rise and run of the line (if line type is best fit)
line.slopeVisible boolean true When true and in line mode, shows the slope of the line (if line type is best fit)
type.selected enum (line, smooth, best fit) best fit Chooses the line type
type.visible boolean true Shows/hides the line
points.all array [] Gives the array of all points. You can also use this as an initial state to have points already plotted
points.count number Number of points currently plotted
points.max number Max number of points that can be plotted
points.xMax number highest x value of plotted points
points.xMin number lowest x value of plotted points
points.yMax number highest y value of plotted points
points.yMin number lowest y value of plotted points
xAxis.bounds string (#,#) -50,50 Sets the bounds of the x axis
xAxis.label string X sets the label of the x axis
xAxis.labelPosition enum (positive, negative) positive Sets the position of the X axis to either the positive or negative end of the chart
xAxis.scale enum (linear, log) linear sets the scale of the x axis to either linear or log
xAxis.snapDistance number 1 The closest number on the X axis that the point snaps to. So if the snap distance is 1, then it snaps to intervals of 1. If it is 0.5, snaps to intervals of 0.5
xAxis.units string Defaults to no units, but you can add in units however you’d like
yAxis.bounds string (#,#) -50,50 Sets the bounds of the y axis
yAxis.label string Y sets the label of the y axis
yAxis.labelPosition enum (positive, negative) positive Sets the position of the Y axis to either the positive or negative end of the chart
yAxis.scale enum (linear, log) linear sets the scale of the y axis to either linear or log
yAxis.snapDistance number 1 The closest number on the Y axis that the point snaps to. So if the snap distance is 1, then it snaps to intervals of 1. If it is 0.5, snaps to intervals of 0.5
yAxis.units string Defaults to no units, but you can add in units however you’d like
zoom.enabled boolean true Enables/disables the student’s ability to zoom in/out
zoom.max number 10 The max value the student can zoom out to
zoom.min number 0.1 The min value the student can zoom in to
zoom.visible boolean true Shows/hides the zoom controls