This is an old revision of the document!


See Also

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()
PointsClicked( Datasets() as GraffitiWebChartDataset )

Methods

Definition Description
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.
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 Integer ) Removes the dataset signified by DataIndex.
SetBarFill( DatasetIndex as Integer, BarIndex as Integer, NewColor as Color ) Changes the bar fill 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 Integer, BarIndex as Integer, NewColor as Color ) Changes the bar stroke highlight color for the specified bar.
SetBarStroke( DatasetIndex as Integer, BarIndex as Integer, NewColor as Color ) Changes the bar stroke color for specified bar.

Properties

Name Type Default Value Description
Animation Boolean True When true, the chart will animate changes to data.
AnimationEasing Easings Linear The motion style to use for animating chart elements.
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.
BezierCurve Boolean True When True, lines will be curved using a bezier algorithm.
BezierCurveTension Double 0.4 The tension on the curved line.
ChartType ChartTypes 0 The type of chart to be displayed.
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.
DatasetStroke Boolean True Show the stroke line of the dataset.
DatasetStrokeWidth Integer 2 The pixel width of the dataset stroke.
GridLineColor Color &c000000dd The color used to draw the grid lines of the chart.
GridLineWidth Integer 1 The pixel width of the grid line.
ImageData String(Read-Only) “” A base64-encoded image string of the currently displayed chart.
LabelFontSize Integer 12 Size of labels to use for chart axes.
LabelFontStyle FontStyles Normal
Labels() String Nil The array of dataset labels to use in the chart.
LabelsVisible Boolean True Determines whether axis labels are displayed.
PointDotRadius Integer 4 The size of the circle for each data point in applicable charts.
PointDotStrokeWidth Integer 1 The width of the Point Dot's Stroke.
PointHitDetectionRadius Integer 20 The pixel distance in which the data point will be hovered / clicked.
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.
ScaleStart Integer 0 The starting value of the Y-axis.
ScaleSteps Integer 10 The number of steps in the Y-axis.
ScaleStepWidth Integer 10 The width of the scale's individual steps. See Examples below for more information.
ShowGridLines Boolean True Determines whether the grid lines will be displayed.
ShowPointDot Boolean True If True, applicable charts will draw a circle over each data point in each dataset.
ShowToolTips Boolean True If True, tooltips will be shown when hovering over data points.
TooltipFillColor Color &c000000 The background color for the displayed tooltips.
TooltipFontColor Color &cFFFFFF The text color for the displayed tooltips.
TooltipTitleFontColor Color &cFFFFFF The text color used in displaying titles on the tooltips.

Examples

Random Bar Chart

  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

Random Doughnut Chart

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

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):

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)