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
Next revision Both sides next revision
web:chart [2018/08/02 19:55]
agcyphers
web:chart [2019/10/17 12:29]
agcyphers [Examples]
Line 83: Line 83:
 | GridLineColor | [[http://​developer.xojo.com/​color|Color]] | &​c000000dd | The color used to draw the grid lines of the chart. | | GridLineColor | [[http://​developer.xojo.com/​color|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 | [[http://​developer.xojo.com/​integer|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. |
 | 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 | [[http://​developer.xojo.com/​integer|Integer]] | 12 | Size of labels to use for chart axes. |
Line 88: Line 89:
 | Labels() | [[http://​developer.xojo.com/​string|String]] | Nil | The array of dataset labels to use in the chart. | | Labels() | [[http://​developer.xojo.com/​string|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 | [[http://​developer.xojo.com/​boolean|Boolean]] | True | Determines whether axis labels are displayed. |
 +| MultiTooltipTemplate | String | ""​ | Template to use for displaying tooltips for multiple overlapping datapoints. |
 | PointDotRadius | [[http://​developer.xojo.com/​integer|Integer]] | 4 | The size of the circle for each data point in applicable charts. | | PointDotRadius | [[http://​developer.xojo.com/​integer|Integer]] | 4 | The size of the circle for each data point in applicable charts. |
 | PointDotStrokeWidth | [[http://​developer.xojo.com/​integer|Integer]] | 1 | The width of the Point Dot's Stroke. | | PointDotStrokeWidth | [[http://​developer.xojo.com/​integer|Integer]] | 1 | The width of the Point Dot's Stroke. |
Line 100: Line 102:
 | TooltipFillColor | [[http://​developer.xojo.com/​color|Color]] | &​c000000 | The background color for the displayed tooltips. | | TooltipFillColor | [[http://​developer.xojo.com/​color|Color]] | &​c000000 | The background color for the displayed tooltips. |
 | TooltipFontColor | [[http://​developer.xojo.com/​color|Color]] | &​cFFFFFF | The text color for the displayed tooltips. | | TooltipFontColor | [[http://​developer.xojo.com/​color|Color]] | &​cFFFFFF | The text color for the displayed tooltips. |
 +| TooltipTemple | String | ""​ | Template to be used for displaying datapoint tooltips. |
 | TooltipTitleFontColor | [[http://​developer.xojo.com/​color|Color]] | &​cFFFFFF | The text color used in displaying titles on the tooltips. | | TooltipTitleFontColor | [[http://​developer.xojo.com/​color|Color]] | &​cFFFFFF | The text color used in displaying titles on the tooltips. |
- 
 ==== Examples ==== ==== Examples ====
 === Random Bar Chart === === Random Bar Chart ===
Line 151: 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: <code js><% if (label) { %> and later <% } %></​code>​. 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 |