Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
web:chart [2019/01/09 13:52]
agcyphers [Properties]
web:chart [2019/10/23 05:53] (current)
Line 59: Line 59:
 ==== Methods ==== ==== Methods ====
 ^ Definition ​     ^ Description ​      ^ ^ Definition ​     ^ Description ​      ^
-| AddDataset( newDataset as GraffitiWebChartDataset,​ newIndex as [[http://​developer.xojo.com/​integer|Integer]] = -1 ) | Adds a the provided dataset at the position signified by newIndex. ​ If newIndex is less than zero, the item is appended to the end of the array. |+| AddDataset( newDataset as GraffitiWebChartDataset,​ newIndex as Integer = -1 ) | Adds a the provided dataset at the position signified by newIndex. ​ If newIndex is less than zero, the item is appended to the end of the array. |
 | DeleteAll() | Removes all datasets. | | DeleteAll() | Removes all datasets. |
 | DoResize() | This method forces the chart to update its display. ​ Most commonly would be used when resizing the control. ​ Should not need to be called, but it's there if you need it. | | DoResize() | This method forces the chart to update its display. ​ Most commonly would be used when resizing the control. ​ Should not need to be called, but it's there if you need it. |
-| RemoveDataset( DataIndex as [[http://​developer.xojo.com/​integer|Integer]] ) | Removes the dataset signified by DataIndex. | +| RemoveDataset( DataIndex as Integer ) | Removes the dataset signified by DataIndex. | 
-| SetBarFill( DatasetIndex as [[http://​developer.xojo.com/​integer|Integer]], BarIndex as [[http://​developer.xojo.com/​integer|Integer]], NewColor as [[http://​developer.xojo.com/​color|Color]] ) | Changes the bar fill color for the specified bar. | +| SetBarFill( DatasetIndex as Integer, BarIndex as Integer, NewColor as Color ) | Changes the bar fill color for the specified bar. | 
-| SetBarHighlightFill( DatasetIndex as [[http://​developer.xojo.com/​integer|Integer]], BarIndex as [[http://​developer.xojo.com/​integer|Integer]], NewColor as [[http://​developer.xojo.com/​color|Color]] ) | Changes the bar fill highlight color for the specified bar. | +| SetBarHighlightFill( DatasetIndex as Integer, BarIndex as Integer, NewColor as Color ) | Changes the bar fill highlight color for the specified bar. | 
-| SetBarHighlightStroke( DatasetIndex as [[http://​developer.xojo.com/​integer|Integer]], BarIndex as [[http://​developer.xojo.com/​integer|Integer]], NewColor as [[http://​developer.xojo.com/​color|Color]] ) | Changes the bar stroke highlight color for the specified bar. | +| SetBarHighlightStroke( DatasetIndex as Integer, BarIndex as Integer, NewColor as Color ) | Changes the bar stroke highlight color for the specified bar. | 
-| SetBarStroke( DatasetIndex as [[http://​developer.xojo.com/​integer|Integer]], BarIndex as [[http://​developer.xojo.com/​integer|Integer]], NewColor as [[http://​developer.xojo.com/​color|Color]] ) | Changes the bar stroke color for specified bar. |+| SetBarStroke( DatasetIndex as Integer, BarIndex as Integer, NewColor as Color ) | Changes the bar stroke color for specified bar. |
  
 ==== Properties ==== ==== Properties ====
 ^ Name      ^ Type       ^ Default Value       ^ Description ​      ^ ^ Name      ^ Type       ^ Default Value       ^ Description ​      ^
-| Animation ​| [[http://​developer.xojo.com/​boolean|Boolean]] | True | When true, the chart will animate changes to data. |+| Animation | Boolean | True | When true, the chart will animate changes to data. |
 | AnimationEasing | Easings | Linear | The motion style to use for animating chart elements. | | AnimationEasing | Easings | Linear | The motion style to use for animating chart elements. |
-| AnimationSteps ​| [[http://​developer.xojo.com/​integer|Integer]] | 60 | Determines the number of frames to use for animating the chart. |+| AnimationSteps | Integer | 60 | Determines the number of frames to use for animating the chart. |
 | BackgroundColor | Color | Transparent | If True applies a background color to the chart display. This color is not applied to the image returned by ImageData. | | BackgroundColor | Color | Transparent | If True applies a background color to the chart display. This color is not applied to the image returned by ImageData. |
-| BezierCurve ​| [[http://​developer.xojo.com/​boolean|Boolean]] | True | When True, lines will be curved using a bezier algorithm. | +| BezierCurve | Boolean | True | When True, lines will be curved using a bezier algorithm. | 
-| BezierCurveTension ​| [[http://​developer.xojo.com/​double|Double]] | 0.4 | The tension on the curved line. |+| BezierCurveTension | Double | 0.4 | The tension on the curved line. |
 | ChartType | ChartTypes | 0 | The type of chart to be displayed. | | ChartType | ChartTypes | 0 | The type of chart to be displayed. |
-| DatasetFill ​| [[http://​developer.xojo.com/​boolean|Boolean]] | True | When using line charts, this will cause the data to display the background color associated with the dataset. |+| DatasetFill | Boolean | True | When using line charts, this will cause the data to display the background color associated with the dataset. |
 | Datasets() | GraffitiWebChartDataset | Nil | The array containing the datasets for the current chart. | | Datasets() | GraffitiWebChartDataset | Nil | The array containing the datasets for the current chart. |
-| DatasetStroke ​| [[http://​developer.xojo.com/​boolean|Boolean]] | True | Show the stroke line of the dataset. | +| DatasetStroke | Boolean | True | Show the stroke line of the dataset. | 
-| DatasetStrokeWidth ​| [[http://​developer.xojo.com/​integer|Integer]] | 2 | The pixel width of the dataset stroke. | +| DatasetStrokeWidth | Integer | 2 | The pixel width of the dataset stroke. | 
-| GridLineColor ​| [[http://​developer.xojo.com/​color|Color]] | &​c000000dd | The color used to draw the grid lines of the chart. | +| GridLineColor | Color | &​c000000dd | The color used to draw the grid lines of the chart. | 
-| GridLineWidth ​| [[http://​developer.xojo.com/​integer|Integer]] | 1 | The pixel width of the grid line. |+| GridLineWidth | Integer | 1 | The pixel width of the grid line. |
 | Image | Picture | Nil | A picture representation of the chart that is created when the AnimationComplete event fires. | | Image | Picture | Nil | A picture representation of the chart that is created when the AnimationComplete event fires. |
 | ImageData | String(Read-Only) | ""​ | A base64-encoded image string of the currently displayed chart. | | ImageData | String(Read-Only) | ""​ | A base64-encoded image string of the currently displayed chart. |
-| LabelFontSize ​| [[http://​developer.xojo.com/​integer|Integer]] | 12 | Size of labels to use for chart axes. |+| LabelFontSize | Integer | 12 | Size of labels to use for chart axes. |
 | LabelFontStyle | FontStyles | Normal | Style to apply to chart axis labels. | LabelFontStyle | FontStyles | Normal | Style to apply to chart axis labels.
-| Labels() ​| [[http://​developer.xojo.com/​string|String]] | Nil | The array of dataset labels to use in the chart. | +| Labels() | String | Nil | The array of dataset labels to use in the chart. | 
-| LabelsVisible ​| [[http://​developer.xojo.com/​boolean|Boolean]] | True | Determines whether axis labels are displayed. | +| LabelsVisible | Boolean | True | Determines whether axis labels are displayed. | 
-PointDotRadius ​[[http://​developer.xojo.com/​integer|Integer]] | 4 | The size of the circle for each data point in applicable charts. | +MultiTooltipTemplate ​String | ""​ | Template to use for displaying tooltips for multiple overlapping datapoints
-| PointDotStrokeWidth ​| [[http://​developer.xojo.com/​integer|Integer]] | 1 | The width of the Point Dot's Stroke. | +| PointDotRadius ​| Integer | 4 | The size of the circle for each data point in applicable charts. | 
-| PointHitDetectionRadius ​| [[http://​developer.xojo.com/​integer|Integer]] | 20 | The pixel distance in which the data point will be hovered / clicked. | +| PointDotStrokeWidth | Integer | 1 | The width of the Point Dot's Stroke. | 
-| ScaleOverride ​| [[http://​developer.xojo.com/​boolean|Boolean]] | False | If True, the chart will use the values in the other Scale properties for determining the scale of the chart, rather than automatically assigning values. | +| PointHitDetectionRadius | Integer | 20 | The pixel distance in which the data point will be hovered / clicked. | 
-| ScaleStart ​| [[http://​developer.xojo.com/​integer|Integer]] | 0 | The starting value of the Y-axis. | +| ScaleOverride | Boolean | False | If True, the chart will use the values in the other Scale properties for determining the scale of the chart, rather than automatically assigning values. | 
-| ScaleSteps ​| [[http://​developer.xojo.com/​integer|Integer]] | 10 | The number of steps in the Y-axis. | +| ScaleStart | Integer | 0 | The starting value of the Y-axis. | 
-| ScaleStepWidth ​| [[http://​developer.xojo.com/​integer|Integer]] | 10 | The width of the scale'​s individual steps. See Examples below for more information. | +| ScaleSteps | Integer | 10 | The number of steps in the Y-axis. | 
-| ShowGridLines ​| [[http://​developer.xojo.com/​boolean|Boolean]] | True | Determines whether the grid lines will be displayed. | +| ScaleStepWidth | Integer | 10 | The width of the scale'​s individual steps. See Examples below for more information. | 
-| ShowPointDot ​| [[http://​developer.xojo.com/​boolean|Boolean]] | True | If True, applicable charts will draw a circle over each data point in each dataset. | +| ShowGridLines | Boolean | True | Determines whether the grid lines will be displayed. | 
-| ShowToolTips ​| [[http://​developer.xojo.com/​boolean|Boolean]] | True | If True, tooltips will be shown when hovering over data points. | +| ShowPointDot | Boolean | True | If True, applicable charts will draw a circle over each data point in each dataset. | 
-| TooltipFillColor ​| [[http://​developer.xojo.com/​color|Color]] | &​c000000 | The background color for the displayed tooltips. | +| ShowToolTips | Boolean | True | If True, tooltips will be shown when hovering over data points. | 
-| TooltipFontColor ​| [[http://​developer.xojo.com/​color|Color]] | &​cFFFFFF | The text color for the displayed tooltips. | +| TooltipFillColor | Color | &​c000000 | The background color for the displayed tooltips. | 
-TooltipTitleFontColor ​[[http://​developer.xojo.com/​color|Color]] | &​cFFFFFF | The text color used in displaying titles on the tooltips. | +| TooltipFontColor | Color | &​cFFFFFF | The text color for the displayed tooltips. | 
 +TooltipTemple ​String | ""​ | Template to be used for displaying datapoint tooltips
 +| TooltipTitleFontColor ​| Color | &​cFFFFFF | The text color used in displaying titles on the tooltips. |
 ==== Examples ==== ==== Examples ====
 === Random Bar Chart === === Random Bar Chart ===
Line 152: Line 153:
 chartInstance.ScaleWidth = 10 '// Add an axis point every 10 values between 0 and 100 (0..10..20..30)</​code>​ chartInstance.ScaleWidth = 10 '// Add an axis point every 10 values between 0 and 100 (0..10..20..30)</​code>​
  
 +=== Tooltip Templates ===
 +Anything in between <% and %> will be executed as JavaScript. For example: ''<​% if (label) { %> and later <% } %>''​. Using ''<​%= expr %>''​ will print the value of the variable named by ''​expr''​ into the tooltip.
 +
 +The available variables to print into the tooltip depends on the chart type. In general, the following variables are available:
 +
 +^ Variable ​     ^ Description ​      ^
 +| value | value of the data point |
 +| label | label for the position the data point is at |
 +| datasetLabel | label for the dataset the point is from |
 +| strokeColor | stroke color for the dataset |
 +| fillColor | fill color for the dataset |
 +| highlightFill | highlight fill color for the dataset |
 +| highlightStroke | highlight stroke color for the dataset |