Differences

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

Link to this comparison view

web:chart [2019/10/17 12:29]
agcyphers [Examples]
web:chart [2019/10/23 05:53]
Line 1: Line 1:
-==== See Also ==== 
-[[web:​chartdataset|GraffitiWebChartDataset]]\\ 
-[[web:​chartlegend|GraffitiWebChartLegend]] 
  
-==== Enumerations ==== 
-^ Name      ^ Values ​      ^ 
-| ChartTypes | Bar | 
-| ::: | Line | 
-| ::: | Radar | 
-| ::: | Doughnut | 
-| ::: | Pie | 
-| ::: | StackedBar | 
-| ::: | Polar | 
-| Easings | linear | 
-| ::: | easeInBack | 
-| ::: | easeInBounce | 
-| ::: | easeInCirc | 
-| ::: | easeInCubic | 
-| ::: | easeInElastic | 
-| ::: | easeInExpo | 
-| ::: | easeInQuad | 
-| ::: | easeInQuart | 
-| ::: | easeInQuint | 
-| ::: | easeInSine | 
-| ::: | easeOutBack | 
-| ::: | easeOutBounce | 
-| ::: | easeOutCirc | 
-| ::: | easeOutCubic | 
-| ::: | easeOutElastic | 
-| ::: | easeOutExpo | 
-| ::: | easeOutQuad | 
-| ::: | easeOutQuart | 
-| ::: | easeOutQuint | 
-| ::: | easeOutSine | 
-| ::: | easeInOutBack | 
-| ::: | easeInOutBounce | 
-| ::: | easeInOutCirc | 
-| ::: | easeInOutCubic | 
-| ::: | easeInOutElastic | 
-| ::: | easeInOutExpo | 
-| ::: | easeInOutQuad | 
-| ::: | easeInOutQuart | 
-| ::: | easeInOutQuint | 
-| ::: | easeInOutSine | 
-| FontStyles | Normal | 
-| ::: | Bold | 
-| ::: | Italic | 
-| ::: | BoldItalic | 
- 
-==== Constants ==== 
-^ Name      ^ Type     ^ Value       ^ 
-|  | This class exposes no constants. |  | 
- 
-==== Events ==== 
-^ Definition ​     ^ Description ​      ^ 
-| AnimationComplete() | This event is fired the chart'​s animation has completed, and all data points are shown. 
-| PointsClicked( Datasets() as GraffitiWebChartDataset ) | This event fired when the user clicks one or more data points on the chart. 
- 
-==== Methods ==== 
-^ 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. | 
-| 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. | 
-| RemoveDataset( DataIndex as [[http://​developer.xojo.com/​integer|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. | 
-| 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. | 
-| 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. | 
-| 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. | 
- 
-==== Properties ==== 
-^ Name      ^ Type       ^ Default Value       ^ Description ​      ^ 
-| Animation | [[http://​developer.xojo.com/​boolean|Boolean]] | True | When true, the chart will animate changes to data. | 
-| 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. | 
-| 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. | 
-| BezierCurveTension | [[http://​developer.xojo.com/​double|Double]] | 0.4 | The tension on the curved line. | 
-| 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. | 
-| 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. | 
-| DatasetStrokeWidth | [[http://​developer.xojo.com/​integer|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. | 
-| 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. | 
-| LabelFontSize | [[http://​developer.xojo.com/​integer|Integer]] | 12 | Size of labels to use for chart axes. | 
-| 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. | 
-| 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. | 
-| PointDotStrokeWidth | [[http://​developer.xojo.com/​integer|Integer]] | 1 | The width of the Point Dot's Stroke. | 
-| PointHitDetectionRadius | [[http://​developer.xojo.com/​integer|Integer]] | 20 | The pixel distance in which the data point will be hovered / clicked. | 
-| 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. | 
-| ScaleStart | [[http://​developer.xojo.com/​integer|Integer]] | 0 | The starting value of the Y-axis. | 
-| ScaleSteps | [[http://​developer.xojo.com/​integer|Integer]] | 10 | The number of steps in 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. | 
-| ShowGridLines | [[http://​developer.xojo.com/​boolean|Boolean]] | True | Determines whether the grid lines will be displayed. | 
-| ShowPointDot | [[http://​developer.xojo.com/​boolean|Boolean]] | True | If True, applicable charts will draw a circle over each data point in each dataset. | 
-| ShowToolTips | [[http://​developer.xojo.com/​boolean|Boolean]] | True | If True, tooltips will be shown when hovering over data points. | 
-| 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. | 
-| 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. | 
-==== Examples ==== 
-=== Random Bar Chart === 
- 
-<code xojo> ​ dim r as new Random 
-  ​ 
-  for intDataset as Integer = 1 to 2 
-    dim cFillColor as Color = RGB( r.InRange( 0, 255 ), r.InRange( 0, 255 ), r.InRange( 0, 255 ), r.InRange( 0, 255 ) ) 
-    dim cStrokeColor as Color = RGB( r.InRange( 0, 255 ), r.InRange( 0, 255 ), r.InRange( 0, 255 ), r.InRange( 0, 255 ) ) 
-    dim cPointColor as Color = RGB( r.InRange( 0, 255 ), r.InRange( 0, 255 ), r.InRange( 0, 255 ), r.InRange( 0, 255 ) ) 
-    dim cPointStrokeColor as Color = RGB( r.InRange( 0, 255 ), r.InRange( 0, 255 ), r.InRange( 0, 255 ), r.InRange( 0, 255 ) ) 
-    dim cHighlightFill as Color = RGB( r.InRange( 0, 255 ), r.InRange( 0, 255 ), r.InRange( 0, 255 ), r.InRange( 0, 255 ) ) 
-    dim cHighlightStroke as Color = RGB( r.InRange( 0, 255 ), r.InRange( 0, 255 ), r.InRange( 0, 255 ), r.InRange( 0, 255 ) ) 
-    dim cPointHighlightColor as Color = RGB( r.InRange( 0, 255 ), r.InRange( 0, 255 ), r.InRange( 0, 255 ), r.InRange( 0, 255 ) ) 
-    dim cPointHighlightStrokeColor as Color = RGB( r.InRange( 0, 255 ), r.InRange( 0, 255 ), r.InRange( 0, 255 ), r.InRange( 0, 255 ) ) 
-    ​ 
-    dim dataPoints() as Double 
-    for intCycle as Integer = 1 to 12 
-      dataPoints.Append( r.InRange( 0, 100 ) ) 
-    next 
-    dim newData as GraffitiWebChartDataset = new GraffitiWebChartDataset( "Bar " + Format( intDataset, "#"​ ), cFillColor, cStrokeColor,​ cHighlightFill,​ cHighlightStroke,​ cPointColor,​ cPointStrokeColor,​ cPointHighlightColor,​ cPointHighlightStrokeColor,​ dataPoints() ) 
-    me.Datasets.Append( newData ) 
-  next 
-  ​ 
-  me.Labels = Array( "​January",​ "​February",​ "​March",​ "​April",​ "​May",​ "​June",​ "​July",​ "​August",​ "​September",​ "​October",​ "​November",​ "​December"​ ) 
-  me.ChartType = GraffitiWebChart.TypeBar</​code>​ 
- 
-=== Random Doughnut Chart === 
-<code xojo>dim newData as GraffitiWebChartDataset 
-  dim cFillColor as Color 
-  dim cHighlightFill as Color 
-  ​ 
-  dim r as new Random 
-  ​ 
-  for intCycle as Integer = 1 to 5 
-    cFillColor = RGB( r.InRange( 0, 255 ), r.InRange( 0, 255 ), r.InRange( 0, 255 ) ) 
-    cHighlightFill = RGB( r.InRange( 0, 255 ), r.InRange( 0, 255 ), r.InRange( 0, 255 ) ) 
-    newData = new GraffitiWebChartDataset( "Part " + Format( intCycle, "#"​ ), r.InRange( 0, 100 ), cFillColor, cHighlightFill ) 
-    me.Datasets.Append( newData ) 
-  next 
-  ​ 
-  me.ChartType = GraffitiWebChart.TypeDoughnut</​code>​ 
-  ​ 
-=== Chart Y-Axis Scaling === 
-Let's say we want our bar chart to draw only a scale between 0 and 100, with steps each 10 points. We would set the properties of the chart instance as follows (either in the inspector or programmatically in the Open event): 
-<code xojo>​chartInstance.ScaleOverride = True '// Override the default scale 
-chartInstance.ScaleStart = 0 '// Set our starting position to 0 
-chartInstance.ScaleSteps = 10 '// We want 10 total steps between 0 and 100 
-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 |