Line chart x-axis values other than date and time

[giridhart]

Hi,

Trying to create my first chart.
What I want to do is create a line chart with a series of data (no time or date associated with it)

Below lines did not work,

new Chartkick.LineChart("chart-1", { 11,6,3,2,8});
new Chartkick.LineChart("chart-1", { "1":11,"2":6,"3":3,"4":2,"5":8});

How can I make this work?

Cheers

[ankane]

This is not possible w/ Chartkick. You could use a column chart.

new Chartkick.ColumnChart("chart-1", {"1":11,"2":6,"3":3,"4":2,"5":8});

[camiloribeiro]

Is it still true that LineChart only work with date time values? Thanks.

[ankane]

Yes, still true.

[camiloribeiro]

I found my way with it :) Thanks a lot for sharing.

[ankane]

This is now possible with the discrete option.

[graingerkid]

How do you use the discrete option?

[StephaneJuban]

I'm also interested about it. @camiloribeiro could have been great to share your solution even if it's now 3 years old.... :/

[fiedl]

In the view, add the discrete: true parameter to the line_chart:

- # app/views/charts/index.html.haml
- # ...
= line_chart charts_test_path, discrete: true, height: "400 px"

In the controller, where the data is filled, the x-axis values are defined as the keys of the data hash.

# app/controllers/charts_controller.rb
class ChartsController < ApplicationController

  def index
  end

  # GET /charts/test.json
  def test
    @test_series = [
      {
        name: "Series 1",
        data: { "x1": 1, "x2": 5, "x3": 9 }
      },
      {
        name: "Series 2",
        data: { "x1": 14, "x2": 25, "x3": 2 }
      }
    ]

    render json: @test_series.chart_json
  end
end

Suppose, you have an array of x-values, x_values = ["x1", "x2", "x3"], and you get the y-value by some calculation y_value(x), you may use this short syntax to generate a data hash:

{
  name: "Series 1",
  data: Hash[x_values.collect { |x| [x, y_value(x)] }]
}