ApexCharts Ruby
  • About
  • Installation
  • Usage
    • Cartesian Charts
      • Cartesian Charts: Part 1
        • Line Chart
        • Stepline Chart
        • Area Chart
        • Column Chart
        • Bar Chart
        • Range Bar Chart
      • Cartesian Charts: Part 2
        • Scatter Chart
        • Candlestick Chart
        • Box Plot Chart
      • Cartesian Charts: Part 3
        • Mixed Charts
        • Syncing Charts
        • Brush Chart
        • Annotations
        • Multiple Y-Axes
    • Heatmap Chart
    • Radar Chart
    • Bubble Chart
    • Polar Charts
      • Pie Chart
      • Donut Chart
      • Radial Bar Chart
  • Data Formats
    • Cartesian Charts
      • Candlestick Chart
      • Box Plot Chart
    • Heatmap Chart
    • Radar Chart
    • Bubble Chart
    • Polar Charts
  • Options
    • Introduction
    • Global Options
    • Formatter Function
    • Defer Chart Rendering
    • Render within a script with type module
  • Miscellaneous
    • Reusable Custom Palette
    • Use Alongside Other Charting Libraries
      • Alongside Chartkick
        • Chartkick (Chart.js) and ApexCharts
        • Chartkick (Google Charts) and ApexCharts
        • Chartkick (Highcharts) and ApexCharts
    • Web Support
      • Rails
      • Sinatra
      • Middleman
      • Plain HTML+ERB (Without Framework)
Powered by GitBook
On this page
  1. Usage

Cartesian Charts

PreviousInstallationNextCartesian Charts: Part 1

Last updated 1 year ago

Example series used for cartesian charts:

<% series = [
  {name: "Inactive", data: @inactive_properties},
  {name: "Active", data: @active_properties}
] %>

To build the data, you can use gem . In my case, it was:

@inactive_properties = Property.inactive.group_by_week(:created_at).count
@active_properties = Property.active.group_by_week(:created_at).count

and I'll get the data in this format:

{
  Sun, 29 Jul 2018=>1,
  Sun, 05 Aug 2018=>6,
  ..
}

PS: Property can be any model you have and inactive and active are just some normal ActiveRecord scopes. Keep scrolling down to see accepted data formats.

Example options used for cartesian charts:

<% options = {
  title: 'Properties Growth',
  subtitle: 'Grouped Per Week',
  xtitle: 'Week',
  ytitle: 'Properties',
  stacked: true
} %>
groupdate