1
00:00:00,230 --> 00:00:06,150
And once we have discussed why fusion charts are so awesome, let's start using them.

2
00:00:06,570 --> 00:00:14,160
So we're going to navigate to develop her van front and integration's on the Wonderware.

3
00:00:14,190 --> 00:00:17,190
Of course, looking for E is going to be react.

4
00:00:17,700 --> 00:00:20,570
We bravely click on the link online.

5
00:00:20,760 --> 00:00:24,090
We had to explore, react documentation.

6
00:00:25,060 --> 00:00:29,930
And the first thing that we're going to see is getting started.

7
00:00:30,020 --> 00:00:30,740
Explanation.

8
00:00:31,610 --> 00:00:35,480
Yes, of course, we would need to install the dependencies.

9
00:00:35,510 --> 00:00:39,100
But of course, in our project, we already have them online.

10
00:00:39,110 --> 00:00:43,250
Just keep on scrolling because, of course, I'm going to cover that in detail.

11
00:00:43,250 --> 00:00:48,680
What is happening and what you're looking for is the last thing or here.

12
00:00:49,100 --> 00:00:52,530
So just copy everything to a clipboard where it says are undercharge.

13
00:00:53,180 --> 00:01:00,500
So just click copy and then head back to our project online in the charts.

14
00:01:00,860 --> 00:01:02,200
Look for the example check.

15
00:01:02,820 --> 00:01:09,560
And once you open up the example chart, just select everything, delete and page the code from the

16
00:01:09,590 --> 00:01:10,700
fusion chart library.

17
00:01:11,240 --> 00:01:19,250
Now, if you notice, they are setting up this component as if we would be working in the app.

18
00:01:19,250 --> 00:01:19,700
Come on.

19
00:01:20,000 --> 00:01:21,230
But of course, that is not the case.

20
00:01:21,560 --> 00:01:23,150
We already have our component.

21
00:01:23,510 --> 00:01:24,900
The example, Chuck.

22
00:01:25,760 --> 00:01:28,220
So first I would want to get something on screen.

23
00:01:28,220 --> 00:01:35,200
So we're just going to do some minor updates just so I can see something, some kind of chart.

24
00:01:35,600 --> 00:01:40,370
And then we'll take a look at the code in the bigger detail.

25
00:01:40,760 --> 00:01:43,190
So first, I would want to start by removing distract them.

26
00:01:43,610 --> 00:01:44,580
We're not going to need that.

27
00:01:44,630 --> 00:01:46,690
Again, we're not working in the app jazz.

28
00:01:46,730 --> 00:01:47,900
We already have the component.

29
00:01:48,500 --> 00:01:53,250
And down here, notice they are creating this react F, C.

30
00:01:53,630 --> 00:01:56,960
So that is going to be the chart and then they just pass in the data.

31
00:01:57,500 --> 00:02:02,370
So this is going to be the data that is going to be ORENDER or in our case.

32
00:02:02,390 --> 00:02:08,290
Of course, we don't need to have a app component that is, by the way, a class.

33
00:02:08,720 --> 00:02:13,410
So we might as well set up here our own functional components, a concert.

34
00:02:13,960 --> 00:02:19,910
And then I'm just going to call this chart and I'm going to say component as well.

35
00:02:20,480 --> 00:02:24,710
Then eventually we'll pass in your data, but not at the moment.

36
00:02:25,180 --> 00:02:26,870
And our just want to return.

37
00:02:27,330 --> 00:02:28,670
Let me just grab this component.

38
00:02:29,150 --> 00:02:30,110
So cut it out.

39
00:02:30,810 --> 00:02:32,060
Then copy and paste.

40
00:02:32,700 --> 00:02:36,140
And now instead of returning the app, of course.

41
00:02:36,680 --> 00:02:37,810
Just remove the.

42
00:02:37,850 --> 00:02:43,460
Step number four instead of app were saying schadt component.

43
00:02:43,910 --> 00:02:45,740
So we x border's awesome.

44
00:02:46,550 --> 00:02:53,930
I already have the functionality in the integers where I'm importing the example chart from the example

45
00:02:53,930 --> 00:02:54,200
chart.

46
00:02:54,560 --> 00:02:56,090
And then right away exporting.

47
00:02:56,780 --> 00:03:02,030
Now of course in the Repos we also have the import for example chart as well.

48
00:03:02,360 --> 00:03:04,970
And that is coming from the chart folder.

49
00:03:05,270 --> 00:03:11,690
So now, since you would want to get something on a screen, what we could do, simply say, all right,

50
00:03:12,080 --> 00:03:15,500
let's display our example chart component.

51
00:03:15,980 --> 00:03:16,610
We'll sell it.

52
00:03:17,510 --> 00:03:19,370
We should have some kind of compliant.

53
00:03:19,430 --> 00:03:20,150
And there it is.

54
00:03:20,540 --> 00:03:25,790
Now, at the moment, it doesn't look very pretty, but at least we have something on a screen.

55
00:03:26,210 --> 00:03:28,850
So let me try one more time on a bigger screen.

56
00:03:29,510 --> 00:03:31,890
Say, let's refresh on you up.

57
00:03:31,910 --> 00:03:32,450
There it is.

58
00:03:32,540 --> 00:03:34,070
There is our bond.

59
00:03:34,430 --> 00:03:40,340
Of course, we would need to make some tweaks and all up, but we have some kind of chart displayed.

60
00:03:40,790 --> 00:03:45,890
So now we just need to dig in and explore the library in greater detail.