High Level Parts

highed.DefaultContextMenu(chartPreview) - constructor

Create an instance of the default context menu

This is shared accross the simple and full editor.

Arguments

• chartPreview - highed.ChartPreview: the chart preview for the menu

Definition

./src/ui/highed.defctx.js:31:
highed.DefaultContextMenu = function (chartPreview) {

highed.ChartTemplateSelector(parent) - constructor

UI for selecting a chart template from the ones defined in meta/highed.meta.charts.js

Examples

var picker = highed.ChartTemplateSelector(document.body);

picker.on("Select", function(template) {
    console.log("Selected new template:", template);
});

Arguments

• parent - domnode: the parent to attach the selector to

Methods

• on(event, callback): Listen for event - returns function: Can be called to unbind the listener
  • event: string, The event to listen for
  • callback: function, Function to call when the event is emitted

Emitted Events

• Select: when selecting a template
  • {object} (object) - the template definition
• Hover: when hovering a template
  • {object} (object) - the template definition

Definition

./src/ui/highed.chart.template.selector.js:45:
highed.ChartTemplateSelector = function (parent) {

highed.ChartCustomizer(parent, attributes) - constructor

UI For customizing a chart

Examples

var chart = highed.ChartCustomizer(document.body);

console.log(chart.export.html());

Arguments

• parent - domnode: the node to attach the editor to
• attributes - object: the attributes
  • noAdvanced (bool) - set to false to force disable the advance view
  • availableSettings (string|array) - whitelist of exposed settings

Methods

• on(event, callback): Listen for event - returns function: Can be called to unbind the listener
  • event: string, The event to listen for
  • callback: function, Function to call when the event is emitted
• resize(w, h): Force a resize of the editor
  • w: number, the new width
  • h: number, the new height
• init(foptions, coptions): Init the customizer
  • foptions: object, the customized options
  • coptions: object, the full chart options
• highlightField(id): Highlight a field in the customizer
  • id: string, is the id of the field to highlight
• focus(thing, x, y): Focus a category
  • thing: anything, the category to focus
  • x: number, the x coordinate where the focus was triggered
  • y: number, the y coordinate where the focus was triggered

Emitted Events

• PropertyChange: when a property changes
  • {string} (string) - the path of the change
  • {anything} (anything) - the new value
  • {number} (number) - the change array index

Todo

• there be dragons here.

Definition

./src/ui/highed.chart.customizer.js:47:
highed.ChartCustomizer = function (parent, attributes) {

highed.WizardBar(parent, bodyParent, attributes) - constructor

This is a component that implements a toolbar with wizard steps

Proxies the interface of the WizardStepper object.

Arguments

• parent - domnode: the dom node to attach the UI to
• bodyParent - domnode: the dom node to attach the stepper body to
• attributes - object: options for the object

Methods

• on(event, callback): Listen for event - returns function: Can be called to unbind the listener
  • event: string, The event to listen for
  • callback: function, Function to call when the event is emitted

Emitted Events

• Step: when stepping back or forth
• AddStep: when adding a step to the stepper

Members

• container - domnode: The container which the bar is attached to

Definition

./src/ui/highed.wizbar.js:35:
highed.WizardBar = function (parent, bodyParent, attributes) {

highed.DataImporter(parent, attributes) - constructor

Data importer widget

Examples

var dimp = highed.DataImporter(document.body);

dimp.on("ImportCSV", function(data) {
    console.log("Importing csv:", data.csv);
});

Arguments

• parent - domnode: the node to attach the widget to
• attributes - object: the settings
  • options (string) - the options to include: csv json plugins samples
  • plugins (string) - the plugins to activate (must have been installed first)

Methods

• on(event, callback): Listen for event - returns function: Can be called to unbind the listener
  • event: string, The event to listen for
  • callback: function, Function to call when the event is emitted
• resize(w, h): Force a resize of the widget
  • w: number, the new width
  • h: number, the new height
• show(): Show the importer
• hide(): Hide the importer

Emitted Events

• ImportChartSettings: when importing chart settings
• ImportCSV: when importing CSV
• ImportJSON: when importing JSON

Definition

./src/ui/highed.dataimporter.js:87:
highed.DataImporter = function (parent, attributes) {

highed.Exporter(parent, attributes) - constructor

Export widget

Examples

var exporter = highed.Exporter(document.body), preview = highed.ChartPreview(document.body);

exporter.init(preview.export.json(), preview.export.html(), preview.export.svg(), preview);

Arguments

• parent - domnode: the node to attach the widget to
• attributes - object: the options
  • options (string) - things to include: csv html json plugins
  • plugins (string|array) - plugins to activate

Methods

• init(chartData, chartHTML, chartSVG, chartPreview): Set the export boxes based on chart JSON data (chart.options)
  • chartData: object, the chart JSON
  • chartHTML: string, chart HTML
  • chartSVG: string, chart svg
  • chartPreview: object, instance of highed.ChartPreview
• resize(w, h): Force a resize of the UI
  • w: number, the new width
  • h: number, the new height

Definition

./src/ui/highed.exporter.js:71:
highed.Exporter = function (parent, attributes) {

highed.ChartPreview(parent, attributes) - constructor

Basic chart preview

This is just a facade to Highcharts.Chart mostly. It implements a sliding drawer type widget, where the initial state can be as part of the main DOM, and where the expanded state covers most of the screen (90%)

Arguments

• parent - domnode: the node to attach the preview to
• attributes - object: the settings
  • defaultChartOptions (object) - the default chart options

Methods

• resize(): Resize the preview
• loadTemplate(template): Load a template from the meta
  • template: false, the template object
• data.csv(data): Load CSV data
  • data: object, the data to load
• loadProject(projectData): Load project
  • projectData: false, the data to load
• toProject(): Export project as JSON
• data.json(data): Load JSON data
  • data: object, the data to load
• data.settings(settings): Load chart settings
  • settings: object, the settings to load
• options.set(id, value, index): Set an attribute
  • id: string, the path of the attribute
  • value: anything, the value to set
  • index: number, used if the option is an array
• export.json(): Get embeddable JSON - returns object: the chart object
• export.svg(): Get embeddable SVG - returns string: the result from `Highcharts.Chart.getSVG()`
• export.js(id): Get embeddable JavaScript - returns string: a string containing JavaScript to reproduce the chart
  • id: string, the ID of the node to attach the chart to
• export.html(placehold): Get embeddable HTML - returns string: a string of embeddable HTML
  • placehold: bool, if true, SVG will also be embedded
• expand():
• collapse(): Collapse the chart into its drawer
• new(): Flush all options and start over
• data.export(options): Export the chart - calls Highcharts.Chart.exportChart(..)
  • options: false,
• changeParent(newParent): Attach to a new DOM parent
  • newParent: DOMNode, the node to attach to
• getConstructor(): Returns the constructor currently in use - returns string:

Definition

./src/ui/highed.chartpreview.js:40:
highed.ChartPreview = function (parent, attributes) {

highed.SimpleCustomizer(parent, attributes) - constructor

Simple version of the customizer. Whitelisted options

Arguments

• parent - domnode: the node to append to
• attributes - object: settings
  • availableSettings (array) - whitelist of options to include

Methods

• on(event, callback): Listen for event - returns function: Can be called to unbind the listener
  • event: string, The event to listen for
  • callback: function, Function to call when the event is emitted
• build(options): Build the property setter
  • options: object, the current chart options
• focus(thing, x, y): Focus a field in the inspector
  • thing: object, the thing to focus
    • id (anything) - the id of the field
  • x: number, the x position the request came from
  • y: number, the y position the request came from

Emitted Events

• PropertyChange: when a property is modified

Definition

./src/ui/highed.simple.customizer.js:55:
highed.SimpleCustomizer = function (parent, attributes) {

highed.plugins.import.install(name, defintion) - function

Install a data import plugin

Arguments

• name - string: the name of the plugin
• defintion - object: the plugin definition
  • description (string) - the plugin description
  • treatAs (string) - what to treat the import as: json|csv
  • fetchAs (string) - what the expect request return is
  • defaultURL (string) - the default URL
  • depdendencies (array<string>) - set of additional javascript/css to include
  • options (object) - additional user-supplied options
    • label (string) - the title of the option
    • type (string) - the type of the option
    • default (string) - the default value
    • filter (function) - function to call when executing the plugin
      • url (anything) - request url
      • options (object) - contains user-defined options
      • callback (function) - function to call when the import is done

Definition

./src/ui/highed.dataimporter.js:47:
install: function (name, defintion) {

highed.plugins.export.install(name, definition) - function

Install an export plugin

Arguments

• name - string: the name of the plugin
• definition - object: the plugin definition

Definition

./src/ui/highed.exporter.js:34:
install: function (name, definition) {

highed.licenseInfo.show - false

Show license information modal

Definition

./src/ui/highed.licenseinfo.js:43:
show: modal.show