This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2016-05-16
Channels
- # admin-announcements (3)
- # arachne (9)
- # beginners (10)
- # boot (56)
- # cider (4)
- # cljs-dev (5)
- # cljsjs (4)
- # cljsrn (3)
- # clojure (146)
- # clojure-austin (9)
- # clojure-greece (3)
- # clojure-poland (14)
- # clojure-russia (1)
- # clojure-uk (19)
- # clojurescript (46)
- # cursive (16)
- # datomic (21)
- # emacs (38)
- # events (2)
- # flambo (1)
- # garden (3)
- # hoplon (41)
- # jobs (1)
- # keechma (87)
- # off-topic (2)
- # om (62)
- # om-next (4)
- # other-languages (7)
- # pedestal (6)
- # protorepl (1)
- # reagent (3)
- # rethinkdb (1)
- # ring-swagger (1)
- # rum (3)
- # spacemacs (2)
- # specter (12)
- # test200 (2)
- # untangled (12)
Hello all, I´m trying to use Reagent with highcharts but I don´t know how to update data information with ragent atom. What I´m missing? Change valor -> update gauge
(def valor (reagent/atom 10))
(defn gauge-consumo-config [vl]
{:chart {:type "solidgauge"}
:title {:text "SALA 105"}
:pane {
;:center ["58%" "85%"]
:size "100%"
:startAngle -90
:endAngle 90
:background {
:backgroundColor "#FFF"
:innerRadius "60%"
:outerRadius "100%"
:shape "arc1"
}
}
:tooltip { :enabled false }
:credits { :enabled false }
:yAxis {:stops [[0.1 "#55BF3B"]
[0.5 "#DDDF0D"]
[0.9 "#DF5353"]]
:lineWidth 0
:minorTickInterval nil
:tickPixelInterval 400
:tickWidth 0
:title {:text "" :y -70}
:labels {:y 16}
:min 0
:max 100
}
:series [{:name "Consumo"
:data [vl]
}]
:plotOptions {
:solidgauge {
:dataLabels {:y 15
:borderWidth 0
:useHTML false
:format "{y} %"}
}
}
})
(defn gauge-consumo-did-mount [this]
(js/Highcharts.Chart. (reagent/dom-node this) (clj->js (gauge-consumo-config @valor))))
(defn gauge-consumo-render []
[:div {:style {:width "200px" :height "200px" :margin "0 auto"}}])
(defn gauge-consumo []
(reagent/create-class {:component-did-mount gauge-consumo-did-mount
:component-did-update gauge-consumo-did-mount
:reagent-render gauge-consumo-render}))
(defn reload []
(reagent/render [#'gauge-consumo]
(.getElementById js/document "app")))
@fabrao: I am getting an error when running your code (`highcharts.js:8 Uncaught Error: Highcharts error #17`), what scripts are in your index.html file to bring in highcharts?
index.html
<html>
<head>
<meta charset="utf-8" />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport" />
<title>Central de Serviços</title>
<link rel="stylesheet" type="text/css" href="css/app.css">
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
</head>
<body>
<div id="app"></div>
<script src="js/compiled/app.js"></script>
<script>view_fortigate.core.main();</script>
</body>
</html>
core.cljs
(ns view-fortigate.core
(:require
[reagent.core :as reagent]))
(def valor (reagent/atom 10))
(defn gauge-consumo-config [vl]
{:chart {:type "solidgauge"}
:title {:text "SALA 105"}
:pane {
;:center ["58%" "85%"]
:size "100%"
:startAngle -90
:endAngle 90
:background {
:backgroundColor "#FFF"
:innerRadius "60%"
:outerRadius "100%"
:shape "arc1"
}
}
:tooltip { :enabled false }
:credits { :enabled false }
:yAxis {:stops [[0.1 "#55BF3B"]
[0.5 "#DDDF0D"]
[0.9 "#DF5353"]]
:lineWidth 0
:minorTickInterval nil
:tickPixelInterval 400
:tickWidth 0
:title {:text "" :y -70}
:labels {:y 16}
:min 0
:max 100
}
:series [{:name "Consumo"
:data [vl]
}]
:plotOptions {
:solidgauge {
:dataLabels {:y 15
:borderWidth 0
:useHTML false
:format "{y} %"}
}
}
})
(defn gauge-consumo-did-mount [this]
(js/Highcharts.Chart. (reagent/dom-node this) (clj->js (gauge-consumo-config @valor))))
(defn gauge-consumo-render []
[:div {:style {:width "200px" :height "200px" :margin "0 auto"}}])
(defn gauge-consumo []
(reagent/create-class {:component-did-mount gauge-consumo-did-mount
:component-did-update gauge-consumo-did-mount
:reagent-render gauge-consumo-render}))
(defn reload []
(reagent/render [#'gauge-consumo]
(.getElementById js/document "app")))
(defn ^:export main []
(reload))