Is there any way to use Google Charts in a React app? I have found react-google-charts which I have got working a bit, but it seems to lack much of the API of Google Charts, or is at the very least is undocumented. I'm also a little shy to use something in production that NPM stats show only has ~400 downloads in the last day.
However I can't find Google Charts alone on NPM and no way simply to import Charts from 'google-charts' like I had initially expected.
My next thought was to see if there is a way to import a library as a global variable.
1) How can I do that
2) If that's possible how do I include it in a react component like import { Line } from '???'
Use Webpack externals
By defining a library as external webpack simply export the global symbol for the library, much like (say for jQuery)
{
1: function(...) {
// simplified for illustrating
module.exports = jQuery;
}
}
So you could do something similar to this:
Add a <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> or newer url from Charts homepage
In your webpack configuration add:
externals: {
charts: 'google.charts' // or any other alias you want, can be a regex too! check Webpack's doc for more
}
And import it as:
import chart from 'charts'
// do something!
charts.load('current', {'packages':['corechart']});
Make sure to load Google Charts before loading your bundle.
For the ReactJS part, you need some way to get hold of the native DOM element in your script, by using refs or something.
P.S. I am not a react guy so maybe someone with react background may help
Related
Using Vite with Storybook whenever I do something like:
import image from '../local-asset.png
No error appears but the asset doesn't load.
The only solution found is to create a variable like so:
const image = new URL('../local-asset.png', import.meta.url).href
My problem is that the main project I work with uses Webpack, instead of Vite, and I am not sure about it's compatibility.
Also, I might be missing the point on why should we go with this more cumbersome solution than just the shorter, simple import we are used to.
A partial answer was made here. I believe this question goes a bit further.
I am pretty new to coding and I am currently trying to solve a challenge from frontendmentor.io where my task is to build an ip-address-tracker.
To make this task a little bit more difficult for me, I am trying to build this app with the React framework via create-react-app.
My problem is, that my Javascript file, script.js, somehow isn't working. I am trying to implement it via the script-tag in my index.html.
<script src="../src/script.js"></script>
You can also check out the directory structure, I just updated the project on GitHub.https://github.com/bryanhain97/ip-address-tracker
Thanks a lot.
If you want to include a script in your index.html file in react you'll have to put it into the public folder and specify the path by using %PUBLIC_URL%/path-to-script-relative-to-public-dir
EDIT:
I just looked at your project and what you should do instead of embedding your script in index.html is to import it into index.js. You should probably export the initMap function and call it from index.js
OK. there are a couple of things you did wrong! First of all, React outputs some useful information in the console that is not negligible in case of failure. Please look at the following image.
It is clear that React is complaining about a missing React import. This is because you need to
import React from 'react'
even in a function component. I found this mistake in two places.
The URL you're using in your script.js file is wrong. Please see the git diff over my working directory below.
I don't know how you want to implement all this but I think this is not done THE REACT WAY! React is a component oriented library so, Please check some other alternatives like instead of doing all this in flat functions using direct connections to your DOM element. ReactDOM has some super power to be leveraged here.
I managed to get the application work on my own IP address and Google's (see the screen captures below), though I think you didn't implement it in the REACT WAY. So, keep digging!
[React Error Output][1]
[Git diff of my work space with the fixes][2]
[Working App on my IP Address][3]
[Working App on Google's IP Address][4]
[1]: https://i.stack.imgur.com/gZB72.png
[2]: https://i.stack.imgur.com/xHqfU.png
[3]: https://i.stack.imgur.com/8BEzI.png
[4]: https://i.stack.imgur.com/xZENI.jpg
I'm using angular5 with library "#swimlane/ngx-charts": "^8.0.0"
I need to add a library to use combo-chart because in ngx-charts the default install not include combo-chart .
This is a demo of ngx combo charts.
This is the source code of combo-chart.
I need to use the combo chart in my project.
Please how do I integrate the combo chart inside an angular5 project?
This post in a github discussion explains why components like combo-chart (useful but a bit more complex) aren't included in the ngx-charts library. Instead, those use cases are featured in the demo section, where you can view the source code and the final look and feel.
As far as I can tell, the best way to integrate the combo-chart is to create a combo-chart.component in your own project and copy the source code into it. You will need to include the ngx-charts library and change any imports that rely on the local structure of the demo to point to that library instead.
For example, in combo-chart.component.ts
import { NgxChartsModule, <other imports> } from '../../src';
would become
import { NgxChartsModule, <other imports> } from '#swimlane/ngx-charts';
i'am creating spa application using vuejs and i find out that i have 3 option in loading my javascript library like bootstrap.js or jquery.js and other javascript library:
1.
first is by include all javascript library that i will use in my application in index.html where my vuejs application will live but i find that there is some javascript library that not working to well
ex: there is some javascript library that calculate page height by selecting some div with specific id="page-container", but that div not loaded when page is rendered from server, so at that moment the javascript will throw error since id="page-container" not exist yet.
2.
second is by adding it like this to all my javascript library js
// before you use your files in some components,you should package them
// your local files
export default { //export your file
your_function(){ // defined your function
...
}
}
// now your can use it
// your component file
<script>
import local_file from 'your_file_relative_path'
//now you can use it in the hook function
created(){ //or other hook function
local_file.your_function() //call your function
}
</script>
but that mean i need to change every javascript library that i use...
3.
third is by adding it using npm, and just in the vue component import it, it works okay and feels more natural but not all my javascript library are in npm, some of them is admin template related that i bought from themeforest and will never be in npm.
so which one is a better way or maybe there is much more better way that those 3 option that i find out? its hard to find any tutorial or discussion that mention adding other javascript library to spa vuejs most of them just put a bootstrap into index.html and done.
Well, If your library exist in NPM, then this is the best option, because then you have this option to import only the part of the script that you need for certain components, for example, fontawesome library, you can import only the icons that you need instead of import all of them!
but if your script is not in NPM, the best option is to run your script in beforeMount or beforeCreate of the component that the script needed to run.
the third way which is add the link reference on html is not really suggested, since it will be global and will reduce the performance.
I am trying to integrate DyGraph in a web site that uses require.js for loading modules.
It is possible to load DyGraph using require?
I looked at the code and did not see any define() in there.
I came across this project where it looks like it needs to be "wrapped".
https://github.com/mgmarino/kanso-dygraphs
Has anyone done this before?
Thanks.
The latest dygraphs was fine to load with just:
// put this in your require config
paths: {
'dygraphs' : 'bower_modules/dygraphs/dygraph-combined',
}
...
require('dygraphs');
console.log(Dygraph); // Dygraph is added to global scope