ankane / chartkick

Create beautiful JavaScript charts with one line of Ruby
https://chartkick.com
MIT License
6.33k stars 565 forks source link

X-axis is converted to integers even if datapoint contains alphanumeric characters #616

Closed Tobias-Knudsen closed 9 months ago

Tobias-Knudsen commented 9 months ago

Describe the bug X-axis converts the values Uge 37'to the integer 2037 for some reason. I expect the x-axis to have Uge 37, Uge 38 ... Uge 49 etc.

image

If I add a letter at the end of one of the points, then nothing gets converted. How can I prevent the x-axis from being cast to integers? image

To reproduce Steps to reproduce.

inspection_data = JSON.parse("[[\"Uge 37\",38716],[\"Uge 38\",38391],[\"Uge 39\",39206],[\"Uge 40\",41988],[\"Uge 41\",40607],[\"Uge 42\",36551],[\"Uge 43\",37248],[\"Uge 44\",37976],[\"Uge 45\",38158],[\"Uge 46\",36465],[\"Uge 47\",35085],[\"Uge 48\",31513],[\"Uge 49\",33685]]")

@card = {
  chart_type: 'area_chart',
  data: inspection_data,
  options: {
    colors: [['#ff8a8c']],
    suffix: ' syn',
    legend: false,
    thousands: '.'
  }
}

= send(@card[:chart_type], @card[:data], **@card[:options])

HTML generated by Chartkick

<script>
  (function() {
    if (document.documentElement.hasAttribute("data-turbolinks-preview")) return;
    if (document.documentElement.hasAttribute("data-turbo-preview")) return;

    var createChart = function() { new Chartkick["AreaChart"]("chart-2", [["Uge 37",38716],["Uge 38",38391],["Uge 39",39206],["Uge 40",41988],["Uge 41",40607],["Uge 42",36551],["Uge 43",37248],["Uge 44",37976],["Uge 45",38158],["Uge 46",36465],["Uge 47",35085],["Uge 48",31513],["Uge 49",33685]], {"colors":[["#ff8a8c"]],"suffix":" syn","legend":false,"thousands":"."}); };
    if ("Chartkick" in window) {
      createChart();
    } else {
      window.addEventListener("chartkick:load", createChart, true);
    }
  })();
</script>
ankane commented 9 months ago

Hi @Tobias-Knudsen, check out the discrete option.