GraphRenderer

GraphRenderer for Now.js Framework Core rendering engine for GraphComponent Features: - Line charts - Bar charts - Pie charts - Donut charts - Gauge charts - SVG based rendering - Tooltips - Legends - Responsive design - Animation support

Generated from source on 2026-08-21. Descriptions come from JSDoc in the file.
Re-run docs_scaffold when the code changes; hand edits are lost on regeneration

Source

• File: Now/js/GraphRenderer.js (2305 lines)
• Form: ES class

Public methods (63)

addAnimation(element, attributes)

Adds an animation to an SVG element

addDataPoint(newData, seriesIndex = 0)

Adds a single data point to a specific series

animate(element, properties, duration = 1000)

Add animation system

calculateFontSize()

Calculates and sets the font size based on the container dimensions

calculateNiceRange()

Calculates a nice range for the y-axis and updates the internal state.

calculateVisibleDataCount()

Calculates the number of visible data points based on the configuration

clear()

Clears the existing SVG content and creates a new SVG element

createLegendItem(color, text)

Creates a single legend item with a colored circle and text.

createSVG()

Creates an SVG element and appends it to the container

createSVGElement(type, attributes = {})

Creates an SVG element with the specified attributes

darkenColor(hex, factor = 0.2)

Darkens a HEX color by a specified factor.

debounce(func, wait)

Creates a debounced version of the provided function

describeArc(x, y, radius, startAngle, endAngle)

Describes an arc path

describeGaugeArc(x, y, radius, startAngle, endAngle)

Describes a gauge arc that follows the visual sweep from startAngle to endAngle.

destroy()

Destroys the graph instance, removing event listeners and observers.

disableAnimations()

Disables animations in the SVG temporarily and returns their original states.

drawAxes()

Draws the axes on the graph

drawBarGraph()

Draws a bar graph based on the current data with shadow effects on top and sides

drawGauge()

Draws a gauge chart based on the current data

drawHorizontalGridLines(y)

Draws a horizontal grid line at the specified y position

drawLabel(x, y, text, rotate)

Draws a label at the specified position with optional rotation

drawLegend()

Draws the legend for the graph using SVG with circular color indicators.

drawLineGraph()

Draws a line graph based on the current data

drawPieChart(isDonut = false)

Draws a pie or donut chart based on the current data

drawVerticalGridLines(xPositions)

Draws vertical grid lines at the specified x positions

drawYAxisLabels(axesGroup)

Draws the Y-axis labels

ensureSVG()

Checks and manages SVG element

estimateTextWidth(text)

Estimates the width of a given text string.

exportToCSV()

Exports the graph to a CSV file.

exportToImage(filename = 'graph', format = 'png', width = this.width, height = null, quality = 0.8, scale = 1)

Exports the current graph as an image file (PNG, JPEG, or SVG).

formatValue(value)

Formats a numeric value with commas as thousand separators.

getAccessibilityDescription()

Generates a meaningful description for the graph

getCurvePath(data)

Generates a curved path string for a series of data points

getLabelContent(series, point)

Retrieves the label content for a data point, using a custom formatter if provided, with length limitation.

getLinearPath(data)

Generates a linear path string for a series of data points

getPathLength(pathData)

Helper function to get path length

getPointX(index)

Calculates the x-coordinate for a data point based on its index

getPointY(value)

Calculates the y-coordinate for a data value

getTooltipContent(series, point)

Retrieves the tooltip content for a data point.

getTotal(series)

Retrieves the total value of a series.

handleKeyboardNavigation(event)

Handles keyboard navigation for the graph

handleResize()

Handles window resize events by updating dimensions and redrawing the graph

initialize()

Loads data from a table and renders the graph.

kebabToCamel(str)

Converts a kebab-case string to camelCase

loadAndProcessTableData(table)

Loads and processes data from an HTML table.

loadFromTable(table)

Loads raw data from an HTML table

parseConfigValue(value)

Parses a configuration value from a data attribute string

polarToCartesian(centerX, centerY, radius, angleInRadians)

Converts polar coordinates to Cartesian coordinates

processTableData(rawData)

Processes raw table data into a series data format suitable for the graph

readConfigFromDataAttributes()

Reads configuration options from data-* attributes in the container

redrawGraph(animation = this.config.animation)

Redraws the graph without animation

renderGraph(animation = this.config.animation)

Renders the graph based on the current chart type

restoreAnimations(animations)

Restores animations to the SVG from their original states.

setData(data)

Sets the data for the graph and updates the range

setMargins()

Sets the margins of the graph based on the presence of the legend and other options.

setTheme(theme)

Sets the theme for the graph.

stripTags(html)

Removes HTML tags from a string, returning plain text.

throttle(func, limit)

Throttle helper

validateData(data)

Validates the structure of input data

validateOptions(config)

Validates the provided configuration object

Depends on

EventManager

Events