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.
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" =>
Related
I am trying to create a lollipop chart where some values are negative, and some are positive, either side of zero, like this:
image
However the chart seemingly only allows the marker to be on the "high" end of the chart. Is there a way to control which end has the marker ?
I'm using these chart options:
chartOptions: {
chart: {
type: 'dumbbell',
inverted: true
},
title: {
text: 'lollipop chart'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'value'
}
},
series: [{
name: 'value',
data: [{
name: 'a',
low:0,
high:13,
}, {
name: 'b',
low:0,
high:26,
},{
name: 'c',
low:-43,
high:0
},{
name: 'd',
low:-83,
high:0
},{
name: 'e',
low:0,
high:113
}]
}]
}
The series which should be used in this case is a lollipop, but it seems that the array of objects configuration doesn't work. I reported it on the Highcharts Github issue channel, where you can follow this thread: https://github.com/highcharts/highcharts/issues/13202
As a solution in the dumbell series I suggest to find those graphics in the render callback and hide them.
Demo: https://jsfiddle.net/BlackLabel/3o7acsbt/
events: {
render() {
let chart = this;
chart.series[0].points.forEach(p => {
if (p.low >= 0){
p.lowerGraphic.hide()
} else {
p.upperGraphic.hide()
}
})
}
}
API: https://api.highcharts.com/highcharts/chart.events.render
EDIT
Under the GitHub link, the workaround showed up. Please check it, maybe will be fit better to your requirement.
Is there way to setup log axis using chartkick and default chart.js library?
Yes, you can pass the axis options using 'library' option like this:
<%= line_chart data, {
library: {
legend: {
position: 'bottom',
},
scales: {
yAxes: [
{
id: 'y-axis',
type: 'logarithmic'
},]
}
}
} %>
For more options please consult with chart.js docs.
I'm trying to create a mixed column/line chart using Highcharts.
I've been trying to use the library functionality to set one of my data series to be of type "line". I have tried a few different approaches, but I can't seem to figure out how to pass the type parameter of a given series using the Highcharts API.
<%= column_chart( ChartData.new(#forecast).revenue_and_net_income, library: {
title: {
text: "Revenue and Net Income"
},
series: [{
1 => {
type: "line"
}
}],
} ) %>
Where my data come from the following method:
def revenue_and_net_income
data = [
{
name: "Revenue",
data: revenue_by_year
},
{
name: "Net Income",
data: net_income_by_year,
}
]
end
Not sure what I'm doing wrong? I only seem to be able to access the Highcharts API methods listed under 'Chart', none of the series options etc. seem to work. Can anyone point me in the right direction for how to successfully get this to work?
you can try this way.
<%= line_chart [
{
name: "Amount", type: "column", data: #cause.donations.map {
|t| [t.user.name, t.amount]
}
},
{
name: "Test", type: "line", data: #cause.donations.map {
|t| [t.user.name, t.amount]
}
}
],
prefix: "$",
adapter: "highcharts"
%>
just don't care line_chart, column_chart or anythings... ONLY custom type in data. OK
I want to add annotations to my time series chart.
From Google's documentation:
data.addColumn({type:'string', role:'annotation'});
How can I pass these column properties through Chartkick?
<%= line_chart [{name: 'annotations', data: annotations_array},{name: 'numbers as a time series', data: 'numeric_array'}] %>
I created a pull request to the chartkick.js repo to add the functionality you're describing.
https://github.com/ankane/chartkick.js/pull/58
This is just for the JS library (chartkick.js), but the approach can be used in the ruby library by using the modified chartkick.js from this pull request and passing in the right role values (certainty, annotation, etc.) to the library options.
var data = [..., [Sat Mar 05 2016 17:13:22 GMT-0800 (PST), 1, false, "cool annotation"]];
new Chartkick.LineChart("chart-1", data, {
"library":
{"role":["certainty", "annotation"]}
});
If you're using chartjs-plugin-annotation.js:
https://github.com/chartjs/chartjs-plugin-annotation, then you need to use the library option which passes options from Chartkick through to the underlying chart provider, e.g. Chart.js.
Here's an example I got working to annotate a graph with a labelled vertical line:
<%=
line_chart profit_chart_path(staff), xtitle: 'Day', ytitle: 'Profit',
library: {
annotation: {
annotations: [
{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: 'May 2018',
label: {
content: 'My Vertical Line',
enabled: true
}
}
]
}
}
%>
If, for instance, you wanted a horizontal annotated line with e.g. a numerical value, use these values instead:
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 20,
Ensure that you've registered the plugin first!
import ChartAnnotationsPlugin from 'chartjs-plugin-annotation';
Chart.plugins.register(ChartAnnotationsPlugin);
Try something like this (not tested):
<%= line_chart TABLE.group(XXX).where(XXX), library: {name: 'annotations', data: annotations_array, name: 'numbers as a time series', data: 'numeric_array', type:'string', role:'annotation'} %>
In 2022, with plugin version 1.4.0, working configuration is as follows:
library:
{
plugins:
{
annotation:
{
annotations:
{
line1:
{
type: 'line',
xMin: "2022-06-01",
xMax: "2022-06-01",
borderColor: 'rgb(255, 99, 132)',
borderWidth: 2
}
}
}
}
}
Without plugins key does not work.
You have to register a new plugin in app/javascript/application.js(if it is Rails app):
import { Chart } from 'chart.js';
// Make annotations for charts
import annotationPlugin from 'chartjs-plugin-annotation';
Chart.register(annotationPlugin);
an then in the view you can use it like this:
= line_chart #some_records, curve: false, prefix: "EUR ", thousands: "'", points: false,
library: {plugins: {annotation: {annotations: {line1: {type: 'line', xMin: Date.today.beginning_of_month.to_s, xMax: Date.today.beginning_of_month.to_s, borderColor: 'rgb(105,105,105)', borderWidth: 1}}}}}
I'm doing a rails app and was able to get chartkick working but customizing it is a bit of a pain in the butt. I'm trying to customize the tooltip with the Google chart API but I can't seem to figure out. I just want to be able to change the text, "Value".
Could someone put me in the right direction.
Here is my code:
<%=
column_chart [
["Strongly Disagree", p[1]],
["Disagree", p[2]],
["Neutral", p[3]],
["Agree", p[4]],
["Strongly Agree", p[5]]
],
height: "220px",
library: {
width: 665,
fontName: "Helvetica Neue",
colors: ["#29abe2"],
tooltip: {
textStyle: {
color: "#333333"
}
},
bar: {
groupWidth: "50%"
},
vAxis: {
title: "Everyone",
titleTextStyle: {
italic: false,
color: '#777'
},
gridlines: {
color: "#eeeeee"
},
viewWindow: {
max: m
}
}
}
%>
The chartkick documentation is sparse, but if this system works the way I suspect it does, then you need to add an array of column headers to the start of your data, eg:
[
["Label for column 0", "Label for column 1"],
["Strongly Disagree", p[1]],
["Disagree", p[2]],
["Neutral", p[3]],
["Agree", p[4]],
["Strongly Agree", p[5]]
]