Global

Methods

changeToBarChart(myData, willRenderDivId, width, height)

This function is used to render bar charts using the Vega view API. They parse the data passed to them and use Vega chart specifications defined in JSON files fetched using the Fetch API, and it also sets various values for the charts such as axis labels, colors, stroke widths, and chart size.
Parameters:
Name Type Description
myData object User's input data
willRenderDivId string The ID of the DOM element where the chart will be rendered.
width number Viewable width of an element in pixels, including padding, but not the border, scrollbar or margin.
height number Viewable height of an element in pixels, including padding, but not the border, scrollbar or margin.
Source:

changeToLineChart(myData, willRenderDivId, width, height)

This function is used to render line charts controlled by the two Vega View APIs. They parse the data passed to them and use Vega chart specifications defined in JSON files fetched using the Fetch API, and it also sets various values for the charts such as axis labels, colors, stroke widths, and chart size.
Parameters:
Name Type Description
myData object User's input data
willRenderDivId string The ID of the DOM element where the chart will be rendered.
width number Viewable width of an element in pixels, including padding, but not the border, scrollbar or margin.
height number Viewable height of an element in pixels, including padding, but not the border, scrollbar or margin.
Source:

changeToLineChart_Detail_View(myData, willRenderDivId, width, height)

This function is used to render line charts using the Vega view API. They parse the data passed to them and use Vega chart specifications defined in JSON files fetched using the Fetch API, and it also sets various values for the charts such as axis labels, colors, stroke widths, and chart size.
Parameters:
Name Type Description
myData object User's input data
willRenderDivId string The ID of the DOM element where the chart will be rendered.
width number Viewable width of an element in pixels, including padding, but not the border, scrollbar or margin.
height number Viewable height of an element in pixels, including padding, but not the border, scrollbar or margin.
Source:

changeToScatterPlot(myData, willRenderDivId, width, height)

This function is used to render scatter plot using the Vega view API. They parse the data passed to them and use Vega chart specifications defined in JSON files fetched using the Fetch API, and it also sets various values for the charts such as axis labels, colors, stroke widths, and chart size.
Parameters:
Name Type Description
myData object User's input data
willRenderDivId string The ID of the DOM element where the chart will be rendered.
width number Viewable width of an element in pixels, including padding, but not the border, scrollbar or margin.
height number Viewable height of an element in pixels, including padding, but not the border, scrollbar or margin.
Source:

controlBarChartColor()

This function is responsible for creating a color control panel for the bar chart. It creates a color picker element and sets up an event listener for it. When the user clicks on the color box, the color picker opens, allowing the user to select a color for the bar chart. This function gets called when a bar chart is rendered.
Source:

controlLineColor()

This function is responsible for creating a color control panel for the line chart. It determines the number of datasets to be displayed on the chart and creates a corresponding color control for each one. Users can click on the colored circles to open a color picker to change the color of each line. This function gets called when a line chart is rendered.
Source:

controlSizeOfInputField(inputfield, editor, handle)

Controls the size of an input field based on mouse movement. This function adds event listeners to a specified handle element to allow resizing of an input field. The 'mousedown' event on the handle initiates the resizing process, activating 'mousemove' and 'mouseup' events. The 'mousemove' event dynamically adjusts the input field's height based on the cursor's vertical displacement. The 'mouseup' event finalizes the resizing and removes the 'mousemove' and 'mouseup' event listeners. The maximum height of the input field is capped at 500 pixels.
Parameters:
Name Type Description
inputfield HTMLElement The HTML element representing the input field to be resized.
editor HTMLElement The HTML element representing the editor area, which will be resized along with the input field.
handle HTMLElement The HTML element used as a handle to resize the input field and editor area.
Source:

graphSizeControl(willRenderObj)

This function takes an object as an parameter and parses it to get the necessary parameters such as size and input data, which are then passed to the appropriate rendering functions such as changeToLineChart() or changeToScatterPlot(). The function also uses the Observer API to monitor whether the size of the div elements in which the charts are rendered changes. If a change is detected, the function will re-render the charts with the updated size.
Parameters:
Name Type Description
willRenderObj object Parameter format{ main_chart: {name:"main-chart",type: bar-chart, dataset: []} }
Source:

initResizerFn(resizer, sidebar, content)

Initializes a function to handle the resizing of a sidebar and content area with a draggable resizer. This function has internal handlers for mousedown, mousemove, and mouseup events to control the resizing process. The mousedown handler tracks the initial mouse position and sets up event listeners for mouse movement and release. The mousemove handler adjusts the sidebar width based on the change in mouse position. The mouseup handler removes event listeners for mouse movement and release once the resizing action is done.
Parameters:
Name Type Description
resizer HTMLElement The HTML element used as a handle to resize the sidebar and content area.
sidebar HTMLElement The HTML element representing the sidebar, which will be resized.
content HTMLElement The HTML element representing the content area, which will be resized indirectly.
Source:

updateGraph(dataset, type, color, projection)

This function is responsible for retrieving the user's input data and preferences from the form, parsing the input data, and updating the current dataset and visualization options accordingly. It then creates an object that encapsulates the relevant information, including the selected chart type, input data, and the div element where the chart will be rendered. Finally, this object is passed as an argument to the graphSizeControl() function, which calculates the appropriate dimensions for the chart and uses them to render the chart.
Parameters:
Name Type Description
dataset Array.<Object> The dataset for the chart.
type string The type of the chart.
color string The color to use for the chart.
projection boolean Flag indicating whether a projection chart is needed.
Source:

Events

chartTypeSelect

Sets up a 'change' event listener for a chart type selector. When the chart type selector's value changes, this listener checks the new value and adjusts the display properties of the bar chart color selector, step selector, and line chart color selector. Different chart types require different selectors to be visible.
Properties:
Name Type Description
chartTypeSelect HTMLElement The HTML select element for choosing the chart type.
colorSelect HTMLElement The HTML element representing the barchart color selector, which is shown or hidden based on the chart type.
stepSelect HTMLElement The HTML element representing the step selector, which is shown or hidden based on the chart type.
lineChartColorSelect HTMLElement The HTML element representing the line chart color selector, which is shown or hidden based on the chart type.
Source:
Listens to Events:
  • event:change - The event that triggers the function.

form

Sets up an event listener for a form submission. Prevents the default form submission action and extracts the form data. The data is then processed and used to update a graph. Alerts the user if the input format is invalid.
Parameters:
Name Type Description
event Event The submit event object.
Properties:
Name Type Description
formData FormData The form's data, extracted using the FormData interface.
data Array The parsed input data, expected to be an array of objects.
type string The type of chart to be generated.
stroke string The stroke input from the form.
color string The color input for the bar chart from the form.
projection boolean The projection status, converted to boolean.
Source:
Listens to Events:
  • event:submit - The event that triggers the function.
Throws:
If JSON.parse fails to parse the input data.
Type
SyntaxError
Returns:
Type
undefined