7
7
*/
8
8
9
9
import React from 'react' ;
10
- import { View , StyleSheet } from 'react-native' ;
10
+ import { View , StyleSheet , Button } from 'react-native' ;
11
11
12
12
import FusionCharts from 'react-native-fusioncharts' ;
13
13
14
+ const dataSource = {
15
+ chart : {
16
+ caption : 'Business Results 2005 v 2006' ,
17
+ xaxisname : 'Month' ,
18
+ yaxisname : 'Revenue' ,
19
+ showvalues : '1' ,
20
+ numberprefix : '$' ,
21
+ useroundedges : '1' ,
22
+ animation : '1'
23
+ } ,
24
+ categories : [
25
+ {
26
+ category : [
27
+ {
28
+ label : 'Jan'
29
+ } ,
30
+ {
31
+ label : 'Feb'
32
+ } ,
33
+ {
34
+ label : 'Mar'
35
+ } ,
36
+ {
37
+ label : 'Apr'
38
+ } ,
39
+ {
40
+ label : 'May'
41
+ } ,
42
+ {
43
+ label : 'Jun'
44
+ } ,
45
+ {
46
+ label : 'Jul'
47
+ } ,
48
+ {
49
+ label : 'Aug'
50
+ } ,
51
+ {
52
+ label : 'Sep'
53
+ } ,
54
+ {
55
+ label : 'Oct'
56
+ } ,
57
+ {
58
+ label : 'Nov'
59
+ } ,
60
+ {
61
+ label : 'Dec'
62
+ }
63
+ ]
64
+ }
65
+ ] ,
66
+ dataset : [
67
+ {
68
+ seriesname : '2006' ,
69
+ data : [
70
+ {
71
+ value : '21000'
72
+ } ,
73
+ {
74
+ value : '29800'
75
+ } ,
76
+ {
77
+ value : '25800'
78
+ } ,
79
+ {
80
+ value : '26800'
81
+ } ,
82
+ {
83
+ value : '29600'
84
+ } ,
85
+ {
86
+ value : '32600'
87
+ } ,
88
+ {
89
+ value : '31800'
90
+ } ,
91
+ {
92
+ value : '36700'
93
+ } ,
94
+ {
95
+ value : '29700'
96
+ } ,
97
+ {
98
+ value : '31900'
99
+ } ,
100
+ {
101
+ value : '34800'
102
+ } ,
103
+ {
104
+ value : '24800'
105
+ }
106
+ ]
107
+ } ,
108
+ {
109
+ seriesname : '2005' ,
110
+ data : [
111
+ {
112
+ value : '10000'
113
+ } ,
114
+ {
115
+ value : '6000'
116
+ } ,
117
+ {
118
+ value : '12500'
119
+ } ,
120
+ {
121
+ value : '15000'
122
+ } ,
123
+ {
124
+ value : '11000'
125
+ } ,
126
+ {
127
+ value : '9800'
128
+ } ,
129
+ {
130
+ value : '11800'
131
+ } ,
132
+ {
133
+ value : '19700'
134
+ } ,
135
+ {
136
+ value : '21700'
137
+ } ,
138
+ {
139
+ value : '21900'
140
+ } ,
141
+ {
142
+ value : '22900'
143
+ } ,
144
+ {
145
+ value : '20800'
146
+ }
147
+ ]
148
+ }
149
+ ] ,
150
+ events : {
151
+ drawComplete : function ( ) {
152
+ console . log ( 'drawn' ) ;
153
+ }
154
+ }
155
+ } ;
156
+
14
157
class App extends React . Component {
15
158
constructor ( props ) {
16
159
super ( props ) ;
17
160
this . state = {
18
- type : 'timeseries ' ,
161
+ type : 'msbar2d ' ,
19
162
width : '100%' ,
20
163
height : '100%' ,
21
164
dataFormat : 'json' ,
22
- dataSource : {
23
- data : null ,
24
- caption : {
25
- text : 'Sales Analysis'
26
- } ,
27
- subcaption : {
28
- text : 'Grocery'
29
- } ,
30
- yAxis : [
31
- {
32
- plot : {
33
- value : 'Grocery Sales Value' ,
34
- type : 'line'
35
- } ,
36
- format : {
37
- prefix : '$'
38
- } ,
39
- title : 'Sale Value'
40
- }
41
- ]
42
- } ,
165
+ dataSource : dataSource ,
43
166
schemaJson : null ,
44
- dataJson : null
167
+ dataJson : null ,
168
+ events : {
169
+ beforeRender : function ( e , o ) {
170
+ console . log ( 'before render' , e , o ) ;
171
+ } ,
172
+ drawComplete : function ( e , o ) {
173
+ console . log ( 'drawn' , e , o ) ;
174
+ } ,
175
+ dataPlotClick : function ( e , o ) {
176
+ console . log ( 'First type of Click' , e , o ) ;
177
+ }
178
+ }
45
179
} ;
46
180
47
181
this . libraryPath = Platform . select ( {
@@ -52,7 +186,7 @@ class App extends React.Component {
52
186
}
53
187
54
188
componentDidMount ( ) {
55
- this . fetchDataAndSchema ( ) ;
189
+ // this.fetchDataAndSchema();
56
190
}
57
191
58
192
fetchDataAndSchema ( ) {
@@ -75,15 +209,24 @@ class App extends React.Component {
75
209
return (
76
210
< View style = { styles . body } >
77
211
< FusionCharts
78
- dataJson = { this . state . dataJson }
79
- schemaJson = { this . state . schemaJson }
80
212
type = { this . state . type }
81
213
width = { this . state . width }
82
214
height = { this . state . height }
83
215
dataFormat = { this . state . dataFormat }
84
216
dataSource = { this . state . dataSource }
217
+ events = { this . state . events }
85
218
libraryPath = { this . libraryPath } // set the libraryPath property
86
219
/>
220
+ < Button
221
+ title = "Press me"
222
+ onPress = { ( ) => {
223
+ this . setState ( { events : {
224
+ dataPlotClick : function ( e , o ) {
225
+ console . log ( 'Clicked' , e , o ) ;
226
+ }
227
+ } } )
228
+ } }
229
+ />
87
230
</ View >
88
231
) ;
89
232
}
0 commit comments