• A short introduction to the manual

Tutorial

  • Installation of the JavaScript library
    • Step one: copy the arcadiaCharts files to your webserver
    • Step two: Testing the installation
  • Your first line chart in 2 minutes
    • The essentials in brief
    • A note for experienced users
    • Step by step introduction
      • Display a chart in a new or existing HTML-Page
    • Further reading
  • Your first bar chart in 2 minutes
    • The essentials in brief
    • A note for experienced users
    • Step by step introduction
      • Display a chart in a new or existing HTML-Page
    • Further reading
  • Your first pie chart in 2 minutes
    • The essentials in brief
    • A note for experienced users
    • Step by step introduction
      • Display a chart in a new or existing HTML-Page
    • Further reading
  • Inserting your data
    • What is a value set?
    • How to set the chart's data source
      • Using a string for data input
      • Using an external file for data input
    • Other decimal separators for floating point numbers
    • Other delimiters than the comma
  • Changing the look of your chart
    • How to adjust the chart background
    • How to resize your chart
    • Styles and Color: Theme and ColorScheme
    • Overview of the themes and colorSchemes
      • The following themes are available
      • The following color schemes are available
    • Changing the colors of your valuesets
    • Built-in vs. external themes
    • Enforce use of a built-in or external theme or colorScheme
  • Axes and scales
    • Why add a second axis?
    • How to set up a secondary axis
      • Adding the secondary y-axis
      • Formatting the axis labels
    • Setting minimum/maximum values
    • Introduction to axis types - category, linear, date, logarithmic
      • Category axis
      • Linear axis
      • Date axis
      • Logarithmic axis
  • Labeling your chart
    • How to use markup tags
    • How to add axis captions
    • How to add a footer to your chart
    • How to add more text to the legend
      • About legend entries in different chart types
      • Adding a header and footer to the legend
      • Removing the legend
  • Interactivity - using popups and markers
    • Why use popups and markers?
    • How to use popups
    • How to use markers
  • How to set up a back link for free usage
  • Remote hosting ArcadiaCharts
    • Why hosting ArcadiaCharts on a remote server?
    • Limitations of remotely hosted library
    • Using our free hosted library
    • Hosting your own ArcadiaCharts library
  • Multiple charts on one page
    • Example of multiple div elements
    • The javascript part of displaying two charts
    • A complete example of a html-page with two charts
  • Troubleshooting tutorial
    • Debugging information
    • The try...catch statement
    • Problems with the same-origin policies
    • Version number
    • Mandatory elements of a CSV data block
    • Problems with Internet Explorer

Reference Manual

  • Line charts
    • Elements of a line-chart
    • Creating a line-chart
    • Axis labels
    • Axis caption
      • Styling the axis caption
    • Secondary Y-Axis
    • Determining the number of tickmarks drawn on an axis
    • Turning ValuePoints on / off. Collision checking
    • Changing ValuePoint symbols
      • Available ValuePoint types and styles
    • Altering the line width
    • Altering the line color
      • Steps for changing line colors manually
    • Altering the plot area background color
    • Chart background image
    • Turning zeroline highlighting on / off
    • Using built-in standard themes with line charts
  • Bar and column charts
    • Elements of a bar/column chart
    • Types of bar chart and column chart
      • Bar charts
      • Column charts
      • Varieties: "Clustered", "Stacked" and "Stacked 100%"
      • Comparison of ''stacked'' and ''stacked 100'' bar charts with one and two axes
    • Combining a bar/column chart with a line chart
    • Changing the base line of the bar chart
    • Layouting the bar chart
      • Changing the style of the bars
      • Changing the size of the bars and the spacings
    • Using built-in standard themes for bar charts
  • Pie charts
    • Elements of a pie chart
    • Creating a pie chart
    • Functions specific to pie charts
      • Turning your pie chart into a donut chart
      • Drawing only a section of the circle
      • Summarizing smaller pie slices into one aggregated slice
      • Exploding pie slices
      • Changing the text on the pie slices
    • Formatting the popups in a pie chart
    • Layouting the pie chart
      • Pie chart styles
    • Using built-in standard themes with pie charts
  • Size and background color
    • Changing chart size
    • Setting chart border color
  • Title and Footer
    • Adding a title and a footer to a chart
    • Positioning
      • Positioning the title
      • Positioning the footer
    • Markup elements for title, footer (and most other elements where you can set text)
    • Custom markup elements
    • Using images within the title
    • Using hyperlinks in title and footer
      • Changing hyperlink color and style
  • Legend
    • Adding custom text to the legend
      • Supported HTML tags in the legend
    • Changing the position of the legend
    • Changing the appearance of the legend / Theme options
      • Changing the sizes of the legend
      • Changing the background of the legend
      • Changing the symbols for the data series
      • Images in the legend
  • Popups and Markers
    • Popup and marker elements
    • Popups
      • Activating popups
      • Defining popup text
      • Defining popup text for all ValueLines with ''setDefaultPopupText''
      • Defining popup text for a single ValueLine with ''setPopupText''
      • Using placeholders in popup text
    • Styling popups
    • Marker
      • Enabling and formatting the marker
  • Axis settings
    • Supported axis types
      • Category axis (X-axis only)
      • Linear (numeric) axis
      • Date axis
      • Logarithmic axis
    • Primary and secondary axis
      • Adding data to a secondary axis
    • Configuring the value range
      • Overriding the minimum and maximum default settings with only one Y-axis
      • Overriding the minimum and maximum default settings with multiple Y-axes
    • Configuring tickmarks
      • Configuring tickmark text
      • Setting the number of tickmarks
      • Setting the number of sub-tickmarks
      • Displaying the first / last tickmark
    • Axis caption
    • Swapping axes
    • Set axis position
    • Numeric and logarithmic X-axis
  • Data Sources: CSV and ValueSets.
    • Setting the import type
    • CSV data in a string variable
      • Mandatory elements of a CSV data block
    • Attaching csv-data to the chart
    • CSV data stored in a file
    • Data in CSV-format
      • CSV-standard format order
      • CSV data in row order
      • CSV data in even more exotic formats
    • Specifying data types
    • Setting separator and decimal separator
      • Locales
      • Custom separators
    • Data in JSON-format
    • Data in ValueSet2D format
    • Missing Values
  • Introduction to theme file editing
    • About theme files
      • How to use a theme file:
      • How to locate the theme file
    • Structure of the theme file
    • Standard themes vs. individual themes
    • Changing the theme options at the chart code level (i.e. not in the theme file)
    • More advanced theme options
  • Full list of available locales.
  • Using colors and themes
    • Surrounding website color
    • Styles and Color: Theme and ColorScheme
      • Preferred ColorSchemes
    • Built-in vs. external themes
    • Enforce use of a built-in or external theme or colorScheme
    • Changing the color palette
    • Override theme variables in your application
  • Available themes and color schemes
    • Available themes
    • Available color schemes
  • Theme chart options
    • Axes
    • Value elements
    • Backgrounds and gridlines
    • Legend
    • Popup and marker
  • Theme variables and constants
    • Padding of chart elements
    • Title and Footer settings
    • Legend settings (See also legend documentation)
    • Tickmarks and sub-tickmarks
    • Value points, value bars
    • Axis settings
  • Available chart constants
    • Attributes inherent to the whole chart:
    • Attributes inherent to the current element:
  • Using fonts in the chart
    • Introduction
    • Defining which fonts to use in the chart
    • List of available chart elements
    • Using custom tags
    • Loading fonts
    • Generating additional / custom fonts
      • Collections of free, commercially fully usable fonts
  • How to add additional labels
  • Using images in the chart
    • Adding a background image via theme
    • Alternative way of adding a background image via theme
    • Adding a background picture by using the API
    • Using pictures in the title
    • Images in the legend
    • Overriding image variables in your application
  • Formatting patterns
    • Number formatting
    • Date formatting
    • Category formatting
  • Markup tags
    • Markup elements for titles, footers, axis captions (and most other elements for which you can set text)
    • Custom markup elements
  • Logging
  • Exotic features
  • IE compatibility guide
    • Internet Explorer 8
      • Quirks mode
      • IE 7 compatibility mode