VisualNEO Web - neoChart Plugin Tutorial
neoChart
ScriptedLogic and SinLios
1.0
neoChart Plugin Tutorial
Samsung Galaxy Tab 7
False
1024
600
False
False
False
False
WebApp
False
C:\Users\sinli\OneDrive\Documentos\VisualNeoWeb\Libraries\img\default-icon.png
.thead{
background-color:#eaeaea;
}
.pages{
background:#E0E0E0;
overflow:hidden;
}
strong, b{
color:#ed792f;
}
h1 strong,h2 strong,h3 strong{
color:#ed792f;
}
h1 b,h2 b,h3 b{
color:#ed792f;
}
.logoimage {
border-radius: 42px;
}
en
standalone
Offline page
#000000
[AndroidOS,iOS,WindowsPhoneOS]
normal
True
True
False
True
True
False
False
True
False
False
... align top of pages with top of Browser Content Area; DO NOT ALTER
TopCenterApp
... these variables are used in the BackCover page; DO NOT ALTER
SetVar [downloadPage] "https://visualneo.com/product/visualneo-web"
SetVar [tutorialsPage] "https://www.visualneo.com/tutorials"
... setup your Tutorial parameters here
SetVar [tutorialComponent] "neoChart Plugin"
SetVar [tutorialVersion] "1.0"
SetVar [tutorialPublicationDate] "05-JUNE-2021"
SetVar [tutorialAuthor] "Gaev Keeka and Luis Hernández"
SetVar [websiteAuthor] "https://visualneo.com"
SetVar [thisObj] [chartObject]
SetVar "[chartValues]" "createdBy:[thisObj('createdBy')]"
SetVar "[chartValues]" "[chartValues]<br/>delimiterString1:[thisObj('delimiterString1')]"
SetVar "[chartValues]" "[chartValues]<br/>delimiterString2:[thisObj('delimiterString2')]"
... title lines
SetVar "[arrTitles]" "[thisObj('titleLines')]"
ArrayLen [arrTitles] [arrTitlesLen]
SetVar [arrTitlesLen] [arrTitlesLen]-1
Loop 0 [arrTitlesLen] [thisTitlesItem]
SetVar "[chartValues]" "[chartValues]<br/>titleLine[thisTitlesItem]/[arrTitlesLen]:[arrTitles([thisTitlesItem])]"
EndLoop
SetVar "[chartValues]" "[chartValues]<br/>gridOptions:[thisObj('gridOptions')]"
SetVar "[chartValues]" "[chartValues]<br/>legendText:[thisObj('legendText')]"
SetVar "[chartValues]" "[chartValues]<br/>tooltipText:[thisObj('tooltipText')]"
SetVar "[chartValues]" "[chartValues]<br/>yAxisTitleText:[thisObj('yAxisTitleText')]"
SetVar "[chartValues]" "[chartValues]<br/>xAxisTitleText:[thisObj('xAxisTitleText')]"
... xAxisLabels
SetVar "[arrXLabels]" "[thisObj('xAxisLabelsText')]"
ArrayLen [arrXLabels] [arrXLabelsLen]
SetVar [arrXLabelsLen] [arrXLabelsLen]-1
Loop 0 [arrXLabelsLen] [thisXLabelsItem]
SetVar "[chartValues]" "[chartValues]<br/>xAxisLabelsText[thisXLabelsItem]/[arrXLabelsLen]:[arrXLabels([thisXLabelsItem])]"
EndLoop
... dataLabels array
SetVar "[arrDataLabels]" "[thisObj('dataLabels')]"
ArrayLen [arrDataLabels] [arrDataLabelsLen]
SetVar [arrDataLabelsLen] [arrDataLabelsLen]-1
Loop 0 [arrDataLabelsLen] [thisDataItem]
SetVar "[chartValues]" "[chartValues]<br/>dataLabels[thisDataItem]/[arrDataLabelsLen]:[arrDataLabels([thisDataItem])]"
EndLoop
... dataValues array
SetVar "[arrDataValues]" "[thisObj('dataValues')]"
ArrayLen [arrDataValues] [arrDataValuesLen]
SetVar [arrDataValuesLen] [arrDataValuesLen]-1
Loop 0 [arrDataValuesLen] [thisDataItem]
SetVar "[chartValues]" "[chartValues]<br/>dataValues[thisDataItem]/[arrDataValuesLen]:[arrDataValues([thisDataItem])]"
EndLoop
... display it
AlertBox "chartObject content" "[chartValues]" ""
View values of keys for specified object
[chartObject]|VARNAME|name of chart object to be viewed
fadeIn
0px
88px
506px
456px
0px
0px
1024px
88px
0
0px
544px
1024px
56px
0
520px
104px
488px
424px
This is a Tutorial about the <strong>neoChart</strong> plugin, which is a wrapper for the <a href="https://www.chartjs.org/" target="_blank">Chart.js</a>
(javascript) library.<br/><br/>
This version of the Tutorial describes and demonstrates the capabilities of v1.0 of the plugin. It enables developers building Apps using the
<strong>VisualNEOWeb</strong> platform to easily create the following types of charts ...<br/><br/>
<ul>
<li>Horizontal and Vertical Bar charts</li>
<li>Pie, Doughnut and Polar Area charts</li>
<li>Line and Area charts</li>
</ul>
For these charts, you will be able to specify ...<br/><br/>
<ul>
<li>the Type of Chart to be rendered</li>
<li>a Container to host the chart</li>
<li>Title Lines</li>
<li>X and Y Axis Titles</li>
<li>Dataset Values and Labels</li>
<li>an element where an image of a rendered chart can be viewed (so it can subsequently be downloaded and embedded in other web pages and/or Apps)</li>
</ul>
Important note for testers of the beta version released earlier ...<br/><br/>
<ul>
<li>you no longer have to populate your Container with html for the canvas element; this will be automatically generated within the <strong>neoChartRender</strong> command</li>
<li>however, you must now specify the <strong>Container</strong> (not the <strong>Canvas</strong>) element within the <strong>neoChartRender</strong> command</li>
</ul>
In version 1.0, you will still only be able to define and view a single dataset per chart.<br/><br/>
The following capabilities have been deferred to a future release ...<br/><br/>
<ul>
<li>customization (styling) of Tooltips (the current defaults deployed by the chartjs library are deemed sufficient for most use cases)</li>
<li>customization (styling of) the components of the Grid (borders, ticks, lines and more)</li>
<li>definiton and display of multiple datasets on the same chart space</li>
</ul>
While the chart librarary offers some more chart types and customization options, at this time there are no plans to offer other chart types via the plugin.<br/><br/>
On subsequent pages of this Tutorial you will learn how to ...<br/><br/>
<ul>
<li>display each of the chart types with a minimum number of plugin commands (default values will be used for missing definitions)</li>
<li>define properties that are supported for customization of the various components</li>
<li>export the rendering of charts to an image container</li>
</ul>
Happy Charting !!!
24px
208px
456px
272px
<h4><br><strong>Version:</strong> [tutorialVersion]</h4>
<h4><strong>Published:</strong> [tutorialPublicationDate]</h4>
<br><br>
<h5><strong>Authored By</strong>
<br>[tutorialAuthor]</h5>
<a href="[websiteAuthor]">[websiteAuthor]</a>
520px
552px
432px
40px
Click here to begin Tutorial
968px
552px
40px
40px
fill:#ffffff
svgArrowCircleRight
GotoNextPage
MasterPage1
fadeIn
... setup your page title here
SetVar [tutorialPageTitle] "Chart Types"
0px
88px
506px
360px
Here, you can see examples of the different <strong>Chart Types</strong> that you can build within your <strong>VisualNEOWeb</strong> Apps.<br/><br/>
When you click on the Push Buttons below, the associated type of chart will be rendered using a minimal set of <strong>neoChart</strong> commands.<br/><br/>
When you move your mouse pointer over the dataset items of a chart (red circles for the Line and Area charts, coloured areas for the rest),
<strong>Tips</strong> will popup in their default styles.<br/><br/>
In order to fully understand how the charts are rendered within the specified Container element, please study the minimalist set of plugin commands
(within the click events of the Push Buttons) that define the data values and associated labels.<br/><br/>
In subsequent pages of this tutorial, you will learn about the commands (and their parameters) that will allow you to custom define the various chart components.<br/><br/>
537px
88px
456px
456px
0px
450px
504px
94px
8px
16px
80px
32px
Bar Chart
neoChartSetup [chart1] "" ""
SetVar "[chart1DataLabels]" "Africa::Antarctica::Asia::Australasia::Europe::North America::South America"
SetVar "[chart1DataValues]" "1341::1::4641::43::748::592::431"
SetVar "[chart1DataBackgroundColors]" "grey::white::seaGreen::orange::lightBlue::red::tan"
SetVar "[chart1DataBorderColors]" "black::beige::green::orangeRed::steelBlue::darkRed::saddleBrown"
SetVar [chart1DataBorderWidth] 2
neoChartData [chart1] "[chart1DataLabels]" "[chart1DataValues]" "[chart1DataBackgroundColors]" "[chart1DataBorderColors]" "[chart1DataBorderWidth]"
... for testing/verification only
... subroutine to view the components of the chart object
...subViewChartObjectValues [chart1]
...neoChartRender [chart1] "bar" "CanvasInContainerChartTypesDemo"
neoChartRender [chart1] "bar" "ContainerChartTypesDemo"
312px
16px
88px
32px
Line Chart
neoChartSetup [chart1] "" ""
SetVar "[chart1DataLabels]" "2019Q1::2019Q2::2019Q3::2019Q4::2020Q1::2020Q2::2020Q3"
SetVar "[chart1DataValues]" "134::120::95::143::148::192::131"
SetVar "[chart1DataBackgroundColors]" "tan::tan::tan::tan::tan::tan::tan"
SetVar "[chart1DataBorderColors]" "red::red::red::red::red::red::red"
SetVar [chart1DataBorderWidth] 2
neoChartData [chart1] "[chart1DataLabels]" "[chart1DataValues]" "[chart1DataBackgroundColors]" "[chart1DataBorderColors]" "[chart1DataBorderWidth]"
... for testing/verification only
... subroutine to view the components of the chart object
...subViewChartObjectValues [chart1]
neoChartRender [chart1] "line" "ContainerChartTypesDemo"
408px
16px
88px
32px
Area Chart
neoChartSetup [chart1] "" ""
SetVar "[chart1DataLabels]" "2019Q1::2019Q2::2019Q3::2019Q4::2020Q1::2020Q2::2020Q3"
SetVar "[chart1DataValues]" "134::120::95::143::148::192::131"
SetVar "[chart1DataBackgroundColors]" "tan::tan::tan::tan::tan::tan::tan"
SetVar "[chart1DataBorderColors]" "red::red::red::red::red::red::red"
SetVar [chart1DataBorderWidth] 2
neoChartData [chart1] "[chart1DataLabels]" "[chart1DataValues]" "[chart1DataBackgroundColors]" "[chart1DataBorderColors]" "[chart1DataBorderWidth]"
... for testing/verification only
... subroutine to view the components of the chart object
...subViewChartObjectValues [chart1]
neoChartRender [chart1] "area" "ContainerChartTypesDemo"
8px
54px
80px
32px
Pie Chart
neoChartSetup [chart1] "" ""
SetVar "[chart1DataLabels]" "Africa::Antarctica::Asia::Australasia::Europe::North America::South America"
SetVar "[chart1DataValues]" "1341::1::4641::43::748::592::431"
SetVar "[chart1DataBackgroundColors]" "grey::white::seaGreen::orange::lightBlue::red::tan"
SetVar "[chart1DataBorderColors]" "black::beige::green::orangeRed::steelBlue::darkRed::saddleBrown"
SetVar [chart1DataBorderWidth] 2
neoChartData [chart1] "[chart1DataLabels]" "[chart1DataValues]" "[chart1DataBackgroundColors]" "[chart1DataBorderColors]" "[chart1DataBorderWidth]"
... for testing/verification only
... subroutine to view the components of the chart object
...subViewChartObjectValues [chart1]
neoChartRender [chart1] "pie" "ContainerChartTypesDemo"
94px
54px
120px
32px
Doughnut Chart
neoChartSetup [chart1] "" ""
SetVar "[chart1DataLabels]" "Africa::Antarctica::Asia::Australasia::Europe::North America::South America"
SetVar "[chart1DataValues]" "1341::1::4641::43::748::592::431"
SetVar "[chart1DataBackgroundColors]" "grey::white::seaGreen::orange::lightBlue::red::tan"
SetVar "[chart1DataBorderColors]" "black::beige::green::orangeRed::steelBlue::darkRed::saddleBrown"
SetVar [chart1DataBorderWidth] 2
neoChartData [chart1] "[chart1DataLabels]" "[chart1DataValues]" "[chart1DataBackgroundColors]" "[chart1DataBorderColors]" "[chart1DataBorderWidth]"
... for testing/verification only
... subroutine to view the components of the chart object
...subViewChartObjectValues [chart1]
neoChartRender [chart1] "doughnut" "ContainerChartTypesDemo"
220px
54px
128px
32px
Polar Area Chart
neoChartSetup [chart1] "" ""
SetVar "[chart1DataLabels]" "Africa::Antarctica::Asia::Australasia::Europe::North America::South America"
SetVar "[chart1DataValues]" "1341::1::4641::43::748::592::431"
SetVar "[chart1DataBackgroundColors]" "grey::white::seaGreen::orange::lightBlue::red::tan"
SetVar "[chart1DataBorderColors]" "black::beige::green::orangeRed::steelBlue::darkRed::saddleBrown"
SetVar [chart1DataBorderWidth] 2
neoChartData [chart1] "[chart1DataLabels]" "[chart1DataValues]" "[chart1DataBackgroundColors]" "[chart1DataBorderColors]" "[chart1DataBorderWidth]"
... for testing/verification only
... subroutine to view the components of the chart object
...subViewChartObjectValues [chart1]
neoChartRender [chart1] "polarArea" "ContainerChartTypesDemo"
94px
16px
120px
32px
Horizontal Bar
neoChartSetup [chart1] "" ""
SetVar "[chart1DataLabels]" "Africa::Antarctica::Asia::Australasia::Europe::North America::South America"
SetVar "[chart1DataValues]" "1341::1::4641::43::748::592::431"
SetVar "[chart1DataBackgroundColors]" "grey::white::seaGreen::orange::lightBlue::red::tan"
SetVar "[chart1DataBorderColors]" "black::beige::green::orangeRed::steelBlue::darkRed::saddleBrown"
SetVar [chart1DataBorderWidth] 2
neoChartData [chart1] "[chart1DataLabels]" "[chart1DataValues]" "[chart1DataBackgroundColors]" "[chart1DataBorderColors]" "[chart1DataBorderWidth]"
... for testing/verification only
... subroutine to view the components of the chart object
...subViewChartObjectValues [chart1]
...neoChartRender [chart1] "bar" "CanvasInContainerChartTypesDemo"
neoChartRender [chart1] "horizontalBar" "ContainerChartTypesDemo"
MasterPage1
fadeIn
... setup your page title here
SetVar [tutorialPageTitle] "SetUp & Titles"
0px
88px
506px
360px
On this page you will learn about the <strong>neoChartSetup</strong> and <strong>neoChartTitles</strong> commands.<br/><br/>
You create a chart object using the <strong>neoChartSetup</strong> command. This command has 3 parameters ...<br/>
<ul>
<li> <strong>chartObjectVariable</strong> - name of the chart object e.g <span ng-non-bindable>[abcd]</span>
where all the custom properties will be saved and then used to render the chart; you do not have to create this object variable first;
however, any existing object/variable with this name will be deleted/replaced</li>
<li> <strong>delimiterString1</strong> - this text string is used to delimit multiple values within a parameter (default is ::)</li>
<li> <strong>delimiterString2</strong> - this text string is used to delimit multiple instances of multiple values within a parameter (default is :::)</li>
</ul>
You specify the title lines for a chart object by using the <strong>neoChartTitles</strong> command. This command has 3 parameters ...<br/><br/>
<ul>
<li><strong>chartObjectVariable</strong> - name of an existing chart object e.g <span ng-non-bindable>[abcd]</span> where this information will be saved</li>
<li><strong>titleLines</strong> - the title line(s) that will be rendered; text for each line should be separated via the
<i>delimiterString1</i> specified in the <strong>neoChartSetup</strong> command
(default is ::); e.g. 'First Title Line::Second::Third one'</li>
<li><strong>titleOptions</strong> - a text string like '{"position":"top","align":"start","color":"seaGreen"}'
<ul>
<li> currently, <i>position, align and color</i> are the only supported options</li>
<li>valid values for the <i>position</i> option are <i>top, bottom, left and right</i></li>
<li>valid values for the <i>align</i> option are <i>start, center and end</i></li>
<li>you may specify none or more of these options</li>
</ul>
</li>
</ul>
537px
88px
456px
456px
0px
450px
504px
94px
8px
16px
80px
32px
Bar Chart
neoChartSetup [chart2] "" ""
SetVar "[titleOptions]" '{"position":"top","align":"center"}'
neoChartTitles [chart2] "World Population::By Continent::(in millions)" "[titleOptions]"
SetVar "[chart2DataLabels]" "Africa::Antarctica::Asia::Australasia::Europe::North America::South America"
SetVar "[chart2DataValues]" "1341::1::4641::43::748::592::431"
SetVar "[chart2DataBackgroundColors]" "grey::white::seaGreen::orange::lightBlue::red::tan"
SetVar "[chart2DataBorderColors]" "black::beige::green::orangeRed::steelBlue::darkRed::saddleBrown"
SetVar [chart2DataBorderWidth] 2
neoChartData [chart2] "[chart2DataLabels]" "[chart2DataValues]" "[chart2DataBackgroundColors]" "[chart2DataBorderColors]" "[chart2DataBorderWidth]"
... for testing/verification only
... subroutine to view the components of the chart object
...subViewChartObjectValues [chart2]
neoChartRender [chart2] "bar" "ContainerTitlesDemo"
312px
16px
88px
32px
Line Chart
neoChartSetup [chart2] "" ""
SetVar "[titleOptions]" '{"position":"top","align":"start","color":"seaGreen"}'
neoChartTitles [chart2] "SinLios Revenue By Quarter in millions" "[titleOptions]"
SetVar "[chart2DataLabels]" "2019Q1::2019Q2::2019Q3::2019Q4::2020Q1::2020Q2::2020Q3"
SetVar "[chart2DataValues]" "134::120::95::143::148::192::131"
SetVar "[chart2DataBackgroundColors]" "tan::tan::tan::tan::tan::tan::tan"
SetVar "[chart2DataBorderColors]" "red::red::red::red::red::red::red"
SetVar [chart2DataBorderWidth] 2
neoChartData [chart2] "[chart2DataLabels]" "[chart2DataValues]" "[chart2DataBackgroundColors]" "[chart2DataBorderColors]" "[chart2DataBorderWidth]"
... for testing/verification only
... subroutine to view the components of the chart object
...subViewChartObjectValues [chart2]
neoChartRender [chart2] "line" "ContainerTitlesDemo"
408px
16px
88px
32px
Area Chart
neoChartSetup [chart2] "" ""
SetVar "[titleOptions]" '{"position":"bottom","align":"center","color":"red"}'
neoChartTitles [chart2] "SinLios Revenue By Quarter in millions of Euros" "[titleOptions]"
SetVar "[chart2DataLabels]" "2019Q1::2019Q2::2019Q3::2019Q4::2020Q1::2020Q2::2020Q3"
SetVar "[chart2DataValues]" "134::120::95::143::148::192::131"
SetVar "[chart2DataBackgroundColors]" "red"
SetVar "[chart2DataBorderColors]" "red"
SetVar [chart2DataBorderWidth] 2
neoChartData [chart2] "[chart2DataLabels]" "[chart2DataValues]" "[chart2DataBackgroundColors]" "[chart2DataBorderColors]" "[chart2DataBorderWidth]"
... for testing/verification only
... subroutine to view the components of the chart object
...subViewChartObjectValues [chart2]
neoChartRender [chart2] "area" "ContainerTitlesDemo"
8px
54px
80px
32px
Pie Chart
neoChartSetup [chart2] "" ""
SetVar "[titleOptions]" '{"position":"right","align":"center","color":"orange"}'
neoChartTitles [chart2] "World Population as Pie::(in millions)" "[titleOptions]"
SetVar "[chart2DataLabels]" "Africa::Antarctica::Asia::Australasia::Europe::North America::South America"
SetVar "[chart2DataValues]" "1341::1::4641::43::748::592::431"
SetVar "[chart2DataBackgroundColors]" "grey::white::seaGreen::orange::lightBlue::red::tan"
SetVar "[chart2DataBorderColors]" "black::beige::green::orangeRed::steelBlue::darkRed::saddleBrown"
SetVar [chart2DataBorderWidth] 2
neoChartData [chart2] "[chart2DataLabels]" "[chart2DataValues]" "[chart2DataBackgroundColors]" "[chart2DataBorderColors]" "[chart2DataBorderWidth]"
... for testing/verification only
... subroutine to view the components of the chart object
...subViewChartObjectValues [chart2]
neoChartRender [chart2] "pie" "ContainerTitlesDemo"
94px
54px
120px
32px
Doughnut Chart
neoChartSetup [chart2] "" ""
SetVar "[titleOptions]" '{"position":"left","align":"center","color":"blue"}'
neoChartTitles [chart2] "Doughnut Population of the World" "[titleOptions]"
SetVar "[chart2DataLabels]" "Africa::Antarctica::Asia::Australasia::Europe::North America::South America"
SetVar "[chart2DataValues]" "1341::1::4641::43::748::592::431"
SetVar "[chart2DataBackgroundColors]" "grey::white::seaGreen::orange::lightBlue::red::tan"
SetVar "[chart2DataBorderColors]" "black::beige::green::orangeRed::steelBlue::darkRed::saddleBrown"
SetVar [chart2DataBorderWidth] 2
neoChartData [chart2] "[chart2DataLabels]" "[chart2DataValues]" "[chart2DataBackgroundColors]" "[chart2DataBorderColors]" "[chart2DataBorderWidth]"
... for testing/verification only
... subroutine to view the components of the chart object
...subViewChartObjectValues [chart2]
neoChartRender [chart2] "doughnut" "ContainerTitlesDemo"
220px
54px
128px
32px
Polar Area Chart
neoChartSetup [chart2] "" ""
SetVar "[titleOptions]" '{"position":"top","align":"center","color":"purple"}'
neoChartTitles [chart2] "Polar Bear Population::around the world" "[titleOptions]"
SetVar "[chart2DataLabels]" "Africa::Antarctica::Asia::Australasia::Europe::North America::South America"
SetVar "[chart2DataValues]" "1341::1::4641::43::748::592::431"
SetVar "[chart2DataBackgroundColors]" "grey::white::seaGreen::orange::lightBlue::red::tan"
SetVar "[chart2DataBorderColors]" "black::beige::green::orangeRed::steelBlue::darkRed::saddleBrown"
SetVar [chart2DataBorderWidth] 2
neoChartData [chart2] "[chart2DataLabels]" "[chart2DataValues]" "[chart2DataBackgroundColors]" "[chart2DataBorderColors]" "[chart2DataBorderWidth]"
... for testing/verification only
... subroutine to view the components of the chart object
...subViewChartObjectValues [chart2]
neoChartRender [chart2] "polarArea" "ContainerTitlesDemo"
94px
16px
120px
32px
Horizontal Bar
neoChartSetup [chart2] "" ""
SetVar "[titleOptions]" '{"position":"bottom","align":"end","color":"red"}'
neoChartTitles [chart2] "World Population By Continent::(in millions)" "[titleOptions]"
SetVar "[chart2DataLabels]" "Africa::Antarctica::Asia::Australasia::Europe::North America::South America"
SetVar "[chart2DataValues]" "1341::1::4641::43::748::592::431"
SetVar "[chart2DataBackgroundColors]" "grey::white::seaGreen::orange::lightBlue::red::tan"
SetVar "[chart2DataBorderColors]" "black::beige::green::orangeRed::steelBlue::darkRed::saddleBrown"
SetVar [chart2DataBorderWidth] 2
neoChartData [chart2] "[chart2DataLabels]" "[chart2DataValues]" "[chart2DataBackgroundColors]" "[chart2DataBorderColors]" "[chart2DataBorderWidth]"
... for testing/verification only
... subroutine to view the components of the chart object
...subViewChartObjectValues [chart2]
neoChartRender [chart2] "horizontalBar" "ContainerTitlesDemo"
MasterPage1
fadeIn
... setup your page title here
SetVar [tutorialPageTitle] "Axes"
0px
88px
506px
360px
On this page you will learn how to specify the titles for the x and y axes, using <strong>neoChartYAxisTitle</strong> and <strong>neoChartXAxisTitle</strong> commands.<br/><br/>
Note that such titles are not applicable to the <i>pie, doughnut and polarArea</i> type of charts.<br/><br/>
You specify the title for the Y Axis using the <strong>neoChartYAxisTitle</strong> command. This command has 3 parameters ...<br/>
<ul>
<li> <strong>chartObjectVariable</strong> - name of the chart object e.g <span ng-non-bindable>[abcd]</span></li>
<li> <strong>yAxisTitleText</strong> - this text string is used to specify the text to be rendered for the title of the Y Axis</li>
<li> <strong>yAxisTitleOptions</strong> - a text string like '{"align": "start","color":"blue"}'
<ul>
<li> currently, <i>align and color</i> are the only supported options</li>
<li>valid values for the <i>align</i> option are <i>start, center and end</i></li>
<li>you may specify none or more of these options</li>
</ul>
</li>
</ul>
<br/>You specify the title for the X Axis using the <strong>neoChartXAxisTitle</strong> command. This command has 3 parameters ...<br/>
<ul>
<li> <strong>chartObjectVariable</strong> - name of the chart object e.g <span ng-non-bindable>[abcd]</span></li>
<li> <strong>xAxisTitleText</strong> - this text string is used to specify the text to be rendered for the title of the X Axis</li>
<li> <strong>xAxisTitleOptions</strong> - a text string like '{"align": "center","color":"green"}'
<ul>
<li> currently, <i>align and color</i> are the only supported options</li>
<li>valid values for the <i>align</i> option are <i>start, center and end</i></li>
<li>you may specify none or more of these options</li>
</ul>
</li>
</ul>
537px
88px
456px
456px
0px
450px
504px
94px
8px
16px
80px
32px
Bar Chart
neoChartSetup [chart3] "" ""
SetVar "[titleOptions]" '{"position":"top","align":"center"}'
neoChartTitles [chart3] "World Population::By Continent::(in millions)" "[titleOptions]"
SetVar "[chart3DataLabels]" "Africa::Antarctica::Asia::Australasia::Europe::North America::South America"
SetVar "[chart3DataValues]" "1341::1::4641::43::748::592::431"
SetVar "[chart3DataBackgroundColors]" "grey::white::seaGreen::orange::lightBlue::red::tan"
SetVar "[chart3DataBorderColors]" "black::beige::green::orangeRed::steelBlue::darkRed::saddleBrown"
SetVar [chart3DataBorderWidth] 2
neoChartData [chart3] "[chart3DataLabels]" "[chart3DataValues]" "[chart3DataBackgroundColors]" "[chart3DataBorderColors]" "[chart3DataBorderWidth]"
neoChartYAxisTitle [chart3] "Millions of Peeps" '{"color":"blue"}'
neoChartXAxisTitle [chart3] "Continents" '{"align": "start","color":"red"}'
... for testing/verification only
... subroutine to view the components of the chart object
...subViewChartObjectValues [chart3]
neoChartRender [chart3] "bar" "ContainerAxesDemo"
312px
16px
88px
32px
Line Chart
neoChartSetup [chart3] "" ""
SetVar "[titleOptions]" '{"position":"top","align":"start","color":"seaGreen"}'
neoChartTitles [chart3] "Quarterly Revenue" "[titleOptions]"
SetVar "[chart3DataLabels]" "2019Q1::2019Q2::2019Q3::2019Q4::2020Q1::2020Q2::2020Q3"
SetVar "[chart3DataValues]" "134::120::95::143::148::192::131"
SetVar "[chart3DataBackgroundColors]" "red"
SetVar "[chart3DataBorderColors]" "red"
SetVar [chart3DataBorderWidth] 2
neoChartData [chart3] "[chart3DataLabels]" "[chart3DataValues]" "[chart3DataBackgroundColors]" "[chart3DataBorderColors]" "[chart3DataBorderWidth]"
neoChartYAxisTitle [chart3] "Millions of Euros" '{"position": "end","color":"orange"}'
neoChartXAxisTitle [chart3] "Quarter" '{"align": "end","color":"brown"}'
... for testing/verification only
... subroutine to view the components of the chart object
...subViewChartObjectValues [chart2]
neoChartRender [chart3] "line" "ContainerAxesDemo"
408px
16px
88px
32px
Area Chart
neoChartSetup [chart3] "" ""
SetVar "[titleOptions]" '{"position":"bottom","align":"center","color":"red"}'
neoChartTitles [chart3] "SinLios Revenue By Quarter in millions of EUR" "[titleOptions]"
SetVar "[chart3DataLabels]" "2019Q1::2019Q2::2019Q3::2019Q4::2020Q1::2020Q2::2020Q3"
SetVar "[chart3DataValues]" "134::120::95::143::148::192::131"
SetVar "[chart3DataBackgroundColors]" "red"
SetVar "[chart3DataBorderColors]" "red"
SetVar [chartDataBorderWidth] 2
neoChartData [chart3] "[chart3DataLabels]" "[chart3DataValues]" "[chart3DataBackgroundColors]" "[chart3DataBorderColors]" "[chart3DataBorderWidth]"
neoChartYAxisTitle [chart3] "Millions of Euros" ""
neoChartXAxisTitle [chart3] "Quarter" ""
... for testing/verification only
... subroutine to view the components of the chart object
...subViewChartObjectValues [chart2]
neoChartRender [chart3] "area" "ContainerAxesDemo"
94px
16px
120px
32px
Horizontal Bar
neoChartSetup [chart3] "" ""
SetVar "[titleOptions]" '{"position":"bottom","align":"start","color":"red"}'
neoChartTitles [chart3] "World Population By Continent::(in millions)" "[titleOptions]"
SetVar "[chart3DataLabels]" "Africa::Antarctica::Asia::Australasia::Europe::North America::South America"
SetVar "[chart3DataValues]" "1341::1::4641::43::748::592::431"
SetVar "[chart3DataBackgroundColors]" "grey::white::seaGreen::orange::lightBlue::red::tan"
SetVar "[chart3DataBorderColors]" "black::beige::green::orangeRed::steelBlue::darkRed::saddleBrown"
SetVar [chart3DataBorderWidth] 2
neoChartData [chart3] "[chart3DataLabels]" "[chart3DataValues]" "[chart3DataBackgroundColors]" "[chart3DataBorderColors]" "[chart3DataBorderWidth]"
neoChartYAxisTitle [chart3] "The Continents" '{"position": "center","color":"purple"}'
neoChartXAxisTitle [chart3] "Millions" '{"align": "end","color":"purple"}'
... for testing/verification only
... subroutine to view the components of the chart object
...subViewChartObjectValues [chart3]
neoChartRender [chart3] "horizontalBar" "ContainerAxesDemo"
MasterPage1
... setup your page title here
SetVar [tutorialPageTitle] "Labels & Datasets"
0px
88px
506px
456px
<strong>neoChartData</strong> is the command that is used to define the labels and values that make up a single dataset (multiple datasets will be supported in v2.0,
most likely via a separate command).<br/><br/>
The <strong>neoChartData</strong> command has 5 parameters ...<br/><br/>
<ul>
<li><strong>chartObjectVariable</strong> - name of an existing chart object e.g <span ng-non-bindable>[abcd]</span></li>
<li><strong>dataLabels</strong> - a text string of labels separated by the <i>delimiter text</i> specified in the <strong>neoChartSetup</strong> command (default value is ::) e.g.
'Africa::Asia::Europe'</li>
<li><strong>dataValues</strong> - a text string of numbers separated by the <i>delimiter text</i> specified in the <strong>neoChartSetup</strong> command (default value is ::) e.g.
'123::4567::8::96'</li>
<li><strong>backgroundColor</strong> - a text string of colors separated by the <i>delimiter text</i> specified in the <strong>neoChartSetup</strong> command (default value is ::) e.g.
'grey::white::seaGreen::orange::lightBlue::red::tan'; colours may be specified as names, or in RGBA, HEX and HSL formats</li>
<li><strong>borderColor</strong> - a text string of colors separated by the <i>delimiter text</i> specified in the <strong>neoChartSetup</strong> command (default value is ::) e.g.
'grey::white::seaGreen::orange::lightBlue::red::tan'; colours may be specified as names, or in RGBA, HEX and HSL formats</li>
<li><strong>borderWidth</strong> - a number that defines the width of the border e.g. 2</li>
</ul>
504px
88px
520px
456px
For examples of this command and its parameters, please review Button code in previous Tutorial pages.
MasterPage1
... setup your page title here
SetVar [tutorialPageTitle] "Render Chart"
0px
88px
384px
456px
On this page, you will learn about the <strong>neoChartRender</strong> command which will extract previously specified chart component values and create the code
and JSON object in the format that the <strong>chartJS</strong> library needs in order to render the chart.<br/><br/>
You request the chart to be rendered using the <strong>neoChartRender</strong> command. This command has 3 parameters ...<br/><br/>
<ul>
<li><strong>chartObjectVariable</strong> - name of an existing chart object e.g <span ng-non-bindable>[abcd]</span> that contains the definition of the chart to be rendered</li>
<li><strong>chartType</strong> - the type of chart to be rendered; one of bar, horizontalBar, pie, doughnut, polarArea, line, area</li>
<li><strong>containerID</strong> - the <strong>id</strong> of the Container where the chart is to be rendered</li>
</ul>
384px
88px
632px
456px
For examples of this command and its parameters, please review Button code in previous Tutorial pages.
MasterPage1
... setup your page title here
SetVar [tutorialPageTitle] "Chart Image"
0px
88px
368px
360px
On this page you will learn about the <strong>neoChartImage</strong> command.<br/><br/>
With this command, you can view a rendered chart in an Image object;
this will allow your users to download the image and subsequently embed the image file in another web page or App.<br/><br/>
This command has two parameters ...<br/><br/>
<ul>
<li><strong>containerID</strong> - name of an existing Container object where your chart is rendered e.g 'Container43'</li>
<li><strong>imageID</strong> - the name of an Image object where the image of the rendered chart is to be displayed e.g. 'Image2'</li>
</ul>
376px
96px
316px
316px
0px
450px
368px
94px
8px
16px
80px
32px
Bar Chart
neoChartSetup [chart4] "" ""
SetVar "[titleOptions]" '{"position":"top","align":"center"}'
neoChartTitles [chart4] "World Population::By Continent::(in millions)" "[titleOptions]"
SetVar "[chart4DataLabels]" "Africa::Antarctica::Asia::Australasia::Europe::North America::South America"
SetVar "[chart4DataValues]" "1341::1::4641::43::748::592::431"
SetVar "[chart4DataBackgroundColors]" "grey::white::seaGreen::orange::lightBlue::red::tan"
SetVar "[chart4DataBorderColors]" "black::beige::green::orangeRed::steelBlue::darkRed::saddleBrown"
SetVar [chart4DataBorderWidth] 2
neoChartData [chart4] "[chart4DataLabels]" "[chart4DataValues]" "[chart4DataBackgroundColors]" "[chart4DataBorderColors]" "[chart4DataBorderWidth]"
neoChartYAxisTitle [chart4] "Millions of Peeps" ""
neoChartXAxisTitle [chart4] "Continents" ""
... for testing/verification only
... subroutine to view the components of the chart object
...subViewChartObjectValues [chart3]
neoChartRender [chart4] "bar" "ContainerChartImageDemo"
96px
16px
88px
32px
Line Chart
neoChartSetup [chart4] "" ""
SetVar "[titleOptions]" '{"position":"top","align":"center"}'
neoChartTitles [chart4] "World Population::By Continent::(in millions)" "[titleOptions]"
SetVar "[chart4DataLabels]" "Africa::Antarctica::Asia::Australasia::Europe::North America::South America"
SetVar "[chart4DataValues]" "1341::1::4641::43::748::592::431"
SetVar "[chart4DataBackgroundColors]" "grey::white::seaGreen::orange::lightBlue::red::tan"
SetVar "[chart4DataBorderColors]" "black::beige::green::orangeRed::steelBlue::darkRed::saddleBrown"
SetVar [chart4DataBorderWidth] 2
neoChartData [chart4] "[chart4DataLabels]" "[chart4DataValues]" "[chart4DataBackgroundColors]" "[chart4DataBorderColors]" "[chart4DataBorderWidth]"
neoChartYAxisTitle [chart4] "Millions of Peeps" ""
neoChartXAxisTitle [chart4] "Continents" ""
... for testing/verification only
... subroutine to view the components of the chart object
...subViewChartObjectValues [chart3]
neoChartRender [chart4] "line" "ContainerChartImageDemo"
48px
54px
192px
32px
chartImage it !!!
neoChartImage "ContainerChartImageDemo" "ChartImageImage"
192px
14px
80px
32px
Pie Chart
neoChartSetup [chart4] "" ""
SetVar "[titleOptions]" '{"position":"top","align":"center"}'
neoChartTitles [chart4] "World Population::By Continent::(in millions)" "[titleOptions]"
SetVar "[chart4DataLabels]" "Africa::Antarctica::Asia::Australasia::Europe::North America::South America"
SetVar "[chart4DataValues]" "1341::1::4641::43::748::592::431"
SetVar "[chart4DataBackgroundColors]" "grey::white::seaGreen::orange::lightBlue::red::tan"
SetVar "[chart4DataBorderColors]" "black::beige::green::orangeRed::steelBlue::darkRed::saddleBrown"
SetVar [chart4DataBorderWidth] 2
neoChartData [chart4] "[chart4DataLabels]" "[chart4DataValues]" "[chart4DataBackgroundColors]" "[chart4DataBorderColors]" "[chart4DataBorderWidth]"
neoChartYAxisTitle [chart4] "Millions of Peeps" ""
neoChartXAxisTitle [chart4] "Continents" ""
... for testing/verification only
... subroutine to view the components of the chart object
...subViewChartObjectValues [chart3]
neoChartRender [chart4] "pie" "ContainerChartImageDemo"
700px
216px
316px
316px
MasterPage1
fadeIn
... setup your page title here
SetVar [tutorialPageTitle] "Next"
0px
88px
506px
456px
This marks the end of the Tutorial for functionality offered in version 1.0 of the <strong>neoChart</strong> plugin.<br/><br/>
Plans for additional functionality include ...<br/><br/>
<ul>
<li>customized Tooltips</li>
<li>customized Grid</li>
<li>ability to present multiple datasets on the same chart (grouped, stacked etc.)</li>
<li>display of legends to distinguish chart bars, lines etc. for each dataset</li>
</ul>
At this time, plans for the design of such capabilities have not been firmed;
it could well be that, in order to keep the simplicity of charting single datasets,
the afore mentioned functionality may be a separate plugin.<br/><br/>
In any case, the priority placed on developing such functionality will be determined by your need;
so, make sure you express your needs on the <a href='https://visualneo.com/forum' target='_blank'>VisualNEO Forum</a>
504px
88px
520px
456px
fadeIn
259px
80px
509px
472px
0px
544px
1024px
56px
0
0px
0px
1024px
88px
0
304px
120px
416px
352px
<h3 style="padding:15px 0px 15px 0px;border-top:2px solid #ed792f;border-bottom:2px solid #ed792f;"><strong style="color:#403f3c;">Thank you for viewing this Tutorial</strong></h3><br>
If you are viewing this Tutorial online and want to know how this Web App was built,
you can view it with <strong>VisualNEO Web</strong><br><br>
You can download a free trial version<br>of <strong>VisualNEO Web</strong> from <a href="[downloadPage]" target="_blank">here</a><br><br>
You can view more Tutorials about <strong>VisualNEO Web's</strong><br>
Rapid Application Development platform <a href="[tutorialsPage]" target="_blank">here</a>.
16px
552px
40px
40px
fill:#ffffff
svgArrowCircleLeft
GotoPrevPage
0px
0px
1024px
88px
0
0px
8px
496px
72px
<strong style="color:#403f3c">Tutorial</strong><br>[tutorialComponent]
h2
496px
8px
528px
72px
[tutorialPageTitle]
h2
0px
544px
1024px
56px
0
968px
552px
40px
40px
fill:#ffffff
svgArrowCircleRight
GotoNextPage
16px
552px
40px
40px
fill:#ffffff
svgArrowCircleLeft
GotoPrevPage
0px
0px
1024px
600px
False
custom