neoChart
A wrapper for the chart.js (javascript) library. (https://www.chartjs.org/)
Sample Apps:
https://visualneo.com/tutorials/neochart
https://visualneo.com/tutorials/neochart2
Description
The neoChart plugin for VisualNEO Web is a charting tool that leverages the Chart.js library to create various types of interactive and visually appealing charts within web applications. Here are the core features and capabilities of neoChart:
- Chart Setup and Customization:
- The neoChartSetup command defines the chart object, allowing developers to configure various parameters, including custom delimiters for data input, which makes handling complex data easier within the app.
- Titles, labels, and axes titles can be set with commands like neoChartTitles, neoChartYAxisTitle, and neoChartXAxisTitle, enabling clear data representation with customizable styling options.
- Data Definition and Updates:
- With neoChartData, developers can define chart data points, labels, colors, and border options, which are essential for customizing each data series visually.
- For dynamic applications, neoChartDynoInsert, neoChartDynoReplace, and neoChartDynoRemove allow real-time data manipulation by adding, updating, or removing data points, creating an interactive experience that updates based on user interactions or external data sources.
- Rendering and Image Export:
- The neoChartRender command renders the chart in a specified container, supporting a variety of chart types, including bar, line, pie, doughnut, and polar area.
- To export the rendered chart as an image, neoChartImage generates a Base64-encoded image, which can be displayed, saved, or shared, making it useful for generating visual reports or shareable data snapshots.
- Advanced Interactivity:
- neoChart includes features for responsive interaction, making it suitable for applications where users need to visualize and manipulate data on different devices, from desktops to mobile screens.
The neoChart plugin enables VisualNEO Web applications to include customizable, data-driven charts, making it ideal for dashboards, data visualization tools, and any application that requires real-time or interactive data presentation​.
neoChartSetup
|
Purpose: |
Define object variable to store chart parameters. delimiterString1 is text that will be used to delimit multiple values within a parameter in subsequent commands. delimiterString2 is text that will be used to delimit multiple values where each value contains multiple values within a parameter in subsequent commands. |
|
Category: |
neoChart |
|
Syntax: |
neoChartSetup chartObjectVariable "delimiterString1" "delimiterString2"
chartObjectVariable required - name of chartObject e.g. [abcd] delimiterString1 optional - string to delimit multi-value parameters. Default is :: delimiterString2 optional - string to delimit multiple multi-value parameters. Default is ::: |
neoChartData
|
Purpose: |
Define data related information for a chart. object Examples of dataLabels Africa::Asia::Europe Examples of dataValues 400::500::300 Examples of dataBackgroundColors red::green::blue ... can also be RGB, Hex or HSL format Examples of dataBorderColors yellow::brown::purple ... can also be RGB, Hex or HSL format Example of dataBorderWidth 2 |
|
Category: |
neoChart |
|
Syntax: |
neoChartData chartObjectVariable "dataLabels" "dataValues" "dataBackgroundColors" "dataBorderColors" dataBorderWidth
chartObjectVariable required - name of chartObject e.g. [abcd] dataLabels required - labels (x-points) separated by delimiterString1 dataValues required - dataValues (y-points) separated by delimiterString1 dataBackgroundColors required - backgroundColor - one color per label separated by delimiterString1 dataBorderColors required - borderColor - one color per label separated by delimiterString1 dataBorderWidth required - borderWidth - width of background borders |
neoChartTitles
|
Purpose: |
Define title lines for a chart. Each line is separated by delimiterString1 defined in neoChartSetup (default is ::) e.g. World Population::By Continent::(in millions) titleOptions e.g.'{"position":"bottom","align":"end","color":"red"}' |
|
Category: |
neoChart |
|
Syntax: |
neoChartTitles chartObjectVariable "titleLines" "titleOptions"
chartObjectVariable required - name of chartObject e.g. [abcd] titleLines required - lines of text separated by delimiterString1 titleOptions optional - titleOptions - stringyfied JSON object (one or more of position, align and color) |
neoChartYAxisTitle
|
Purpose: |
Specify the text and styling parameters of the Y-Axis title |
|
Category: |
neoChart |
|
Syntax: |
neoChartYAxisTitle chartObjectVariable "yAxisTitleText" "yAxisTitleOptions"
chartObjectVariable required - name of chartObject e.g. [abcd] yAxisTitleText required - text for Y Axis Title yAxisTitleOptions to be available in v1.0 |
neoChartXAxisTitle
|
Purpose: |
Specify the text and styling parameters of the X-Axis title |
|
Category: |
neoChart |
|
Syntax: |
neoChartXAxisTitle chartObjectVariable "xAxisTitleText" "xAxisTitleOptions"
chartObjectVariable required - name of chartObject e.g. [abcd] xAxisTitleText required - text for X Axis Title xAxisTitleOptions to be available in v1.0 |
neoChartRender
|
Purpose: |
Specify ... a) the object variable where the components of the chart are stored b) the type of chart to be rendered c) the ID of the Canvas element where the chart will be rendered |
|
Category: |
neoChart |
|
Syntax: |
neoChartRender chartObjectVariable "chartType" "containerID"
chartObjectVariable required - name of chartObject e.g. [abcd] chartType required - chartType - one of bar, horizontalBar, pie, doughnut, polarArea, line, area containerID ID of the container element where the chart will be rendered |
neoChartImage
|
Purpose: |
generate (base64 format of) image of chart rendered in specified container, and assign it as source of specified image element |
|
Category: |
neoChart |
|
Syntax: |
neoChartImage "containerID" "imageID"
containerID ID of the container element where chart is rendered imageID ID of the image element to host chart image |
neoChartDynoReplace
|
Purpose: |
Dynamically replace properties of datapoints in a rendered chart, |
|
Category: |
neoChart |
|
Syntax: |
neoChartDynoReplace chartObjectVariable "currentLabel" "newLabel" newValue "newBackgroundColor" "newBorderColor" "containerID"
chartObjectVariable required - name of chartObject e.g. [abcd] currentLabel required - label of chart item to be replaced e.g. Earth newLabel optional - new label e.g Mars newValue optional - new value e.g. 3456 newBackgroundColor optional - new background color e.g.. red newBorderColor optional - new border color e.g. orange containerID required - ID of the container element where the chart is rendered |
neoChartDynoRemove
|
Purpose: |
Dynamically remove a datapoint in a rendered chart |
|
Category: |
neoChart |
|
Syntax: |
neoChartDynoRemove chartObjectvariable "currentLabel" "containerID"
chartObjectvariable required - name of chartObject e.g. [abcd] currentLabel required - label of chart item to be removed e.g. Earth containerID required - ID of the container element where the chart is rendered |
neoChartDynoInsert
|
Purpose: |
Dynamically insert a datapoint in a rendered chart |
|
Category: |
neoChart |
|
Syntax: |
neoChartDynoInsert chartObjectVariable "beforeLabel" "newLabel" "newValue" "newBackgroundColor" "newBorderColor" "containerID"
chartObjectVariable required - name of chartObject e.g. [abcd] beforeLabel optional - label before which to insert (leave blank to insert at end) newLabel required - new label e.g Mars newValue required - new value e.g. 3456 newBackgroundColor required - new background color e.g.. red newBorderColor required - new border color e.g. orange containerID required - ID of the container element where the chart is rendered |
neoChartDynoRender
|
Purpose: |
Render previously requested alteration for an existing chart |
|
Category: |
neoChart |
|
Syntax: |
neoChartDynoRender chartObjectvariable "containerID"
chartObjectvariable required - name of chartObject e.g. [abcd] containerID required - ID of the container element where the chart is rendered |
Created with the Personal Edition of HelpNDoc: Effortlessly Create Encrypted, Password-Protected PDFs