Use downloaded libraries instead of online libraries

[minhquankq]

When I inspect code of react-native-chartView.js, I saw that we use online libraries

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

that make the rendering slower. I'm not sure that are they cache or not, but the render delay 1s.

Can we use local libraries instead of online?

[jonrh]

I had noticed this as well (in the code & delay) and am in favour of having the needed dependencies be baked into the eventual React Native bundle JS file (if possible), i.e. no extra network requests. It would also be of benefit for offline apps. I suspect this might come down to licences.

I've been playing a bit around with the code and I believe that jQuery is not needed. As far as I can tell the only thing jQuery is used for as of now is to register a document ready callback. As seen here:

$(function () {
    Highcharts.stockChart('container', highchartConfigObject);
});

Without being 100% I think this could be replaced as such and no longer needing the jQuery dependency:

document.addEventListener("DOMContentLoaded", function() {
    Highcharts.chart('container', highchartConfigObject);
});

[mmazzarolo]

Hi everyone! Does anyone have any hints on how to use offline bundles instead?

[jonrh]

Update: Please ignore, will probably not work. See reply below.

~~@mmazzarolo One dirty way would be to modify the file react-native-ChartView.js. There you could swap out line 38~~

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

~~with:~~

<script>put the contents of the https://code.jquery.com/jquery-2.1.4.min.js file here</script>

~~You would then do this for all the

[mmazzarolo]

Thanks, I thought there was some kind of native implementation for the RN webview but I guess that the easier solution is still the manual replacement :)

[minhquankq]

@jonrh I have tried that way - Put the content of highcharts.js into script tag, remove script jquery by your suggestion. But the chart was not render. have you tried that way?

[jonrh]

@minhquankq I'm very sorry, you're right. After your reply I remembered I did once try it and it failed, confused it with something else. If I remember correctly there were a lot of characters that needed to be escaped for that to work (too much trouble IMO).

I think the long-term solution would be to use the highcharts package on npm. I haven't attempted it though.

[Infinity0106]

I tried to implement it with downloaded libraries, I tried with highcharts and highstock and I could run it but when I imported the text for jquery some weird error came up, so I leave it like that, but if you want i cant upload the version with static highcharts and static highstock

[jonrh]

@Infinity0106 Thanks for your update. In my attempts I was able to get rid of the jQuery dependency with the following code (see my reply above):

document.addEventListener("DOMContentLoaded", function() {
    Highcharts.chart('container', highchartConfigObject);
});

[ShMcK]

Have you considered wrapping Highcharts with react-highcharts?

[PvanHengel]

Check out my comments on https://github.com/TradingPal/react-native-highcharts/issues/54 I put some hits there on how we got it to work. @mmazzarolo