Drawing linear function by using Chartkick gem and Google chart

701 views Asked by At

I am trying to draw a linear function(like y=ax+b) by using Chartkick gem and google chart on my rails application.

'a' and 'b' will be given as parameters.

The problem is that I am trying to achieve an infinite line graph using google chart out of slope 'a' and 'b' and I don't know how to achieve this in a proper way.

I came up with the solution of drawing a line chart with two points, (-b/a, 0) and (0, b) and give trendlines option onto it.

<!-- y = 0.55x floatify(2,@datas[4][2]) + 1.47 floatify(2,@datas[3][2]) -->
<%= line_chart [
               {name: "targets",
                data: [
                   ["#{-(@datas[3][2].to_f/@datas[4][2].to_f).round(2)}",0],
                   [0,"#{@datas[3][2].to_f}"]
                ]
               },
           ],
           library: {
               title: "#{@simplereg.variable_name}",
               subtitle: "#{@simplereg.data_name}",
               legend: "right",
               vAxis: {title: 'average'},
               trendlines: {
                  0: {
                      type: 'exponential',
                      visibleInLegend: true
                  }
                }
           }
%>

However, rails cannot read a '0' value as an option of trendlines unlike what google chart documentation says. -> https://developers.google.com/chart/interactive/docs/gallery/trendlines I have no clue how to fix this code to work.

Please help me... I don't mind throwing up this code and writing in completely different way.

Thanks ahead.

1

There are 1 answers

1
Shikhar Mann On BEST ANSWER

Use something like below

<%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>


<%= line_chart [
                   {name: "targets",
                    data: [
                        ["-2/3",0],
                        [0,"2"]
                    ]
                   },
               ],
               library: {
                   title: "ABC",
                   subtitle: "XYZ",
                   legend: "right",
                   vAxis: {title: 'average'},
                   trendlines: {
                       "0"=> {
        type: 'exponential',
        visibleInLegend: true
    }
    }
    }
%>

basically instead of symbo 0: use "0" =>