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 07:52]
agcyphers [Properties]
web:chart [2020/04/16 15:52] (current)
agcyphers [Events]
Line 1: Line 1:
 ==== See Also ==== ==== See Also ====
 [[web:chartdataset|GraffitiWebChartDataset]]\\ [[web:chartdataset|GraffitiWebChartDataset]]\\
-[[web:chartlegend|GraffitiWebChartLegend]]+[[web:chartlegend|GraffitiWebChartLegend]]\\ 
 +[[web:chartpoint|GraffitiWebChartPoint]]
  
 ==== Enumerations ==== ==== Enumerations ====
Line 55: Line 56:
 ^ Definition      ^ Description       ^ ^ Definition      ^ Description       ^
 | AnimationComplete() | This event is fired the chart's animation has completed, and all data points are shown. | AnimationComplete() | This event is fired the chart's animation has completed, and all data points are shown.
-PointsClickedDatasets() as GraffitiWebChartDataset ) | This event fired when the user clicks one or more data points on the chart.+DatapointClicked(Datapoint as GraffitiWebChartPoint) | Raised when the user clicks data point|
  
 ==== 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 154:
 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 |