Skip to content

Instantly share code, notes, and snippets.

@ThinhPTran

ThinhPTran/charts-reframe.cljs

Forked from edwthomas/charts-reframe.cljs
Created November 28, 2016 10:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ThinhPTran/35a21b91ea3e94020f8a9daa1cfcf4c4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ThinhPTran/35a21b91ea3e94020f8a9daa1cfcf4c4 to your computer and use it in GitHub Desktop.
Download ZIP
Example of using Chart.js with Clojurescript
Raw
charts-reframe.cljs
(:require [re-frame.core :as re-frame]
[reagent.core :as reagent]
[cljsjs.chartjs])
(defn show-revenue-chart
[]
(let [context (.getContext (.getElementById js/document "rev-chartjs") "2d")
chart-data {:type "bar"
:data {:labels ["2012" "2013" "2014" "2015" "2016"]
:datasets [{:data [5 10 15 20 25]
:label "Rev in MM"
:backgroundColor "#90EE90"}
{:data [3 6 9 12 15]
:label "Cost in MM"
:backgroundColor "#F08080"}]}}]
(js/Chart. context (clj->js chart-data))))
(defn rev-chartjs-component
[]
(reagent/create-class
{:component-did-mount #(show-revenue-chart)
:display-name "chartjs-component"
:reagent-render (fn []
[:canvas {:id "rev-chartjs" :width "700" :height "380"}])}))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment