Skip to content

Commit df44805

Browse files
Add More Contribution Steps (Data/Chart Gen)
1 parent b5f77ae commit df44805

File tree

4 files changed

+82
-25
lines changed

4 files changed

+82
-25
lines changed

app/markdown/contribution.md

+60-1
Original file line numberDiff line numberDiff line change
@@ -57,4 +57,63 @@ Finally, run `bin/rails generate controller Articles index --skip-routes` to cre
5757
This will create a few new files. We're most interested in...
5858

5959
- The controller (`app/controllers/dashboard_controller.rb`), and
60-
- The view (`app/views/dashboard/index.htmk.erb`).
60+
- The view (`app/views/dashboard/index.htmk.erb`).
61+
62+
But before we dive into them, go ahead and visit `http://127.0.0.1:3001/dashboard` - you should see a page that looks like this.
63+
64+
![New Dashboard Page](./images/other/NewDashboardPage.png)
65+
66+
### Add Data
67+
We can't generate a chart without data, can we? Go to `app/controllers/dashboard_controller.rb`. Right now, it just has an empty `index` method.
68+
69+
```ruby
70+
class DashboardController < ApplicationController
71+
def index
72+
end
73+
end
74+
```
75+
76+
Let's add some fake data for our chart to display. In reality, this data might come from our database or an external source - it might even be live! After doing this, the controller should look like this.
77+
78+
```ruby
79+
class DashboardController < ApplicationController
80+
def index
81+
@data = [
82+
{
83+
name: "Burger King",
84+
color: "#ff7f50",
85+
value: 1200
86+
},
87+
{
88+
name: "McDonalds",
89+
color: "#ff4757",
90+
value: 500
91+
},
92+
{
93+
name: "Green Burrito",
94+
color: "#2ed573",
95+
value: 780
96+
}
97+
]
98+
99+
@configuration = {
100+
axes: {
101+
horizontal: "Dollars",
102+
}
103+
}
104+
end
105+
end
106+
```
107+
108+
### Generate Chart
109+
Time for the magic! Go to `app/views/dashboard/index.htmk.erb`. This is the template that will be used when users send a `GET` request to `/dashboard`.
110+
111+
Replace its content with the following -
112+
113+
```erb
114+
<%= lollipop_chart @data, @configuration %>
115+
```
116+
117+
Finally, we can enjoy the results!
118+
119+
![DashboardFinished](./images/other/DashboardFinished.png)

app/markdown/getting-started.md

+22-24
Original file line numberDiff line numberDiff line change
@@ -13,31 +13,29 @@ Then, display any of our charts in one of your views by calling a chart helper f
1313
```ruby
1414
class DashboardController < ApplicationController
1515
def index
16-
class ChartsController < ApplicationController
17-
def index
18-
@data = [
19-
{
20-
name: "Burger King",
21-
color: "#ff7f50",
22-
value: 1200
23-
},
24-
{
25-
name: "McDonalds",
26-
color: "#ff4757",
27-
value: 500
28-
},
29-
{
30-
name: "Green Burrito",
31-
color: "#2ed573",
32-
value: 780
33-
}
34-
]
16+
@data = [
17+
{
18+
name: "Burger King",
19+
color: "#ff7f50",
20+
value: 1200
21+
},
22+
{
23+
name: "McDonalds",
24+
color: "#ff4757",
25+
value: 500
26+
},
27+
{
28+
name: "Green Burrito",
29+
color: "#2ed573",
30+
value: 780
31+
}
32+
]
3533

36-
@axes = {
37-
horizontal: "Dollars"
38-
}
39-
end
40-
end
34+
@configuration = {
35+
axes: {
36+
horizontal: "Dollars",
37+
}
38+
}
4139
end
4240
end
4341
```
633 KB
Loading
589 KB
Loading

0 commit comments

Comments
 (0)