using react to embed flexmonster.
not using<script tags. tried to copy flexmonster.js in local box and it gives all out undefined excelptions
./src/containers/query/flexmonster/flexmonster.js
Line 9: Unexpected use of 'top' no-restricted-globals
Line 9: Unexpected use of 'screen' no-restricted-globals
Line 9: Unexpected use of 'screen' no-restricted-globals
Line 9: Unexpected use of 'screen' no-restricted-globals
Line 9: Unexpected use of 'screen' no-restricted-globals
Line 9: 'savingAs' is not defined no-undef
Line 9: 'canvg' is not defined no-undef
Line 9: 'html2canvas' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'canvg' is not defined no-undef
Line 9: 'html2canvas' is not defined no-undef
Line 9: 'jsPDF' is not defined no-undef
Line 9: 'html2canvas' is not defined no-undef
Line 9: 'jsPDF' is not defined no-undef
Line 9: 'html2canvas' is not defined no-undef
Line 9: 'html2canvas' is not defined no-undef
Line 9: 'savingAs' is not defined no-undef
Line 9: 'Zlib' is not defined no-undef
Line 9: 'Zlib' is not defined no-undef
Line 9: 'FlexmonsterToolbar' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 11: 'd3' is not defined no-undef
Line 11: 'd3' is not defined no-undef
Line 11: 'd3' is not defined no-undef
Line 11: 'd3' is not defined no-undef
Line 11: 'JSZip' is not defined no-undef
Line 11: 'jQuery' is not defined no-undef
Line 11: Unexpected use of 'confirm' no-restricted-globals
Line 11: 'jQuery' is not defined no-undef
Line 11: 'jQuery' is not defined no-undef
Line 11: 'jQuery' is not defined no-undef
Line 11: 'jQuery' is not defined no-undef
Line 11: 'jQuery' is not defined no-undef
Line 11: 'jQuery' is not defined no-undef
Line 11: 'jQuery' is not defined no-undef
Line 11: 'jQuery' is not defined no-undef
Line 11: 'jQuery' is not defined no-undef
Line 11: 'jQuery' is not defined no-undef
Line 11: 'd3' is not defined no-undef
Line 11: 'd3' is not defined no-undef
Line 11: 'd3' is not defined no-undef
Line 11: 'd3' is not defined no-undef
Line 11: 'd3' is not de
i have added jquery
Hello Sabby,
Thank you for your question. Please have a look at our react integration example - http://www.flexmonster.com/doc/integration-with-react/. Also, we have a GitHub repository with the samples - https://github.com/flexmonster/pivot-react.
Let us know if everything works fine for you.
Best regards,
Dmytro.
i did refer and used the link you just sent. since am not using any html file...i am importing via react.
import jquery via react is causing issue i suppose. also your flexmonster file neeeds import too
attaching file.
i did install npm install jquery --save and import jquery in my react class
Hello Sabby,
Please have a look at you react project integration example based on the react-boilerplate project - https://github.com/flexmonster/pivot-react/tree/master/ES6. Also, please consider moving to 2.4 components version. The 2.4 version does not need any jQuery libraries. That makes the integration really easy. Please note that you should add the reference to the flexmonster library to the index.html file like in the following example - https://github.com/flexmonster/pivot-react/blob/master/ES6/app/index.html .
Let us know if it works for you.
Regards,
Dmytro.
var pivot = new Flexmonster({ container: "pivotContainer", toolbar: true, report: { dataSource: { data: jsonData }, slice: { rows: [ { uniqueName: "Color" }, { uniqueName: "[Measures]" } ], columns: [ { uniqueName: "Country" } ], measures: [ { uniqueName: "Price", aggregation: "sum" } ] } }, licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX" });
i am using this as i have json . i wil mount this and check
doesnt work still. above tag
new Flexmonster is what am needing to use? any help...
and what do you mean by " consider moving to 2.4 components version" ?
also , [BABEL] Note: The code generator has deoptimised the styling of "C:/ProgramData/ProjectsWM/APHub_React/APHub_react/src/containers/query/flexmonster/flexmonster.js" as it exceeds the max of "500KB".
how do i run this app?
https://github.com/flexmonster/pivot-react/tree/master/ES6
there s no script. npm run setup wont work
Can you provide something like http://jsfiddle.net/flexmonster/pz431qp5/
?
With imports not <scripts
https://github.com/flexmonster/pivot-react/tree/master/ES6 how to run this project?
and my project is react js with redux . not using typescript
Hello Sabby,
Thank you for your feedback. To run this project you need to do the following steps:
1. Run npm run setup
in order to install dependencies and clean the git repo.
2. Run npm start
to see the example app.
More details are available by the following link: https://github.com/react-boilerplate/react-boilerplate.
By the way, this integration sample does not require TypeScript. Let me know in case of further questions.
Regards,
Tanya
is it the project with flexmonster+ react ?
kindly share your latest flexmonsterjs file to integrate with my react-redux project so i can try and use pivot table via flexmonster. need this urgent as i have been waiting and writing questions in blog from 2 days
Hello Sabby,
Answering your questions:
To start the flexmonster+react project, execute the following in the command line:
npm run setup
npm start
Then, just open http://localhost:3000/ in the browser to see the project up and running.
Please let me know if you have any further questions.
Regards,
Ian
cani just add flexmonster.react.js fle from above repo in my project and add <script src="https://cdn.flexmonster.com/flexmonster.js"></script> in my index page. and then will use my own reducer/components
will that be ok or is there any other flexmoster oritented file i need to import ?
Yes, it should be enough.
Also, do not forget about importing flexmonster.react.js
:
import * as FlexmonsterReact from './flexmonster.react';
./src/containers/query/flexmonster/flexmonster.react.js
Line 57: 'Flexmonster' is not defined no-undef
for line this.flexmonster = new Flexmonster(config); in flexmonster.react.js
, i am getting "
'Flexmonster' is not defined no-undef"
do i need to download https://cdn.flexmonster.com/flexmonster.js this file in my local box and import it within lexmonster.react.js ?
Please check that <script src=”https://cdn.flexmonster.com/flexmonster.js”></script>
is included before the main script in the index page.
after doing aboev step import Flexmonster from './flexmonster';
am getting all errors undefined
./src/containers/query/flexmonster/flexmonster.js
Line 9: Unexpected use of 'top' no-restricted-globals
Line 9: Unexpected use of 'screen' no-restricted-globals
Line 9: Unexpected use of 'screen' no-restricted-globals
Line 9: Unexpected use of 'screen' no-restricted-globals
Line 9: Unexpected use of 'screen' no-restricted-globals
Line 9: 'savingAs' is not defined no-undef
Line 9: 'canvg' is not defined no-undef
Line 9: 'html2canvas' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'canvg' is not defined no-undef
Line 9: 'html2canvas' is not defined no-undef
Line 9: 'jsPDF' is not defined no-undef
Line 9: 'html2canvas' is not defined no-undef
Line 9: 'jsPDF' is not defined no-undef
Line 9: 'html2canvas' is not defined no-undef
Line 9: 'html2canvas' is not defined no-undef
Line 9: 'savingAs' is not defined no-undef
Line 9: 'Zlib' is not defined no-undef
Line 9: 'Zlib' is not defined no-undef
Line 9: 'FlexmonsterToolbar' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
same error i started with at begining of this conversation
yes its included.
<script src=”https://cdn.flexmonster.com/flexmonster.js”></script>
Importing ./flexmonster
is a wrong approach. It should be included as a simple JavaScript file.
And flexmonster.react.js
should be imported using React.
1.i download flexmonster.js from https://cdn.flexmonster.com/flexmonster.js
2. added in my project and import it within flexmonster.react.js
3. getting undefined error as abve d3,jquery....and all not defined.
4. can you share with me flexmonsterjs with all imports necessary ? may be all those componets are expected to be at global level from flex but its not at our side. we need imports at each file .
5. can you email or attach the flexmonster.js file with necessary imports?
i did include the script in my index.html file. but i think the scope of it is withini index.html as per my project and it cannot be accessed by other page/compoennt
how can i include this script in my react component ?
i was able to access it via this.flexmonster = new window.Flexmonster(config);
how can i remove Connect , open , save , options from VieW?
also , how can i change look and feel of pivot table? can you tell me easy way to do so ?
how can i enable filtering options? like search ..
<FlexmonsterReact.Pivot toolbar="true"
componentFolder="https://cdn.flexmonster.com/" what should be my component folder? if i remove this...the view is gone. so i shld be using this ?
once the page is loaded with data , any change in event reloads the store but flexmonster component is not changing at all
how can i make sure data is reloaded and flex monster component is frehsed with new data.
provide solution for below tag (if you suggest refresh or reload)
<FlexmonsterReact.Pivot toolbar="true"
componentFolder="https://cdn.flexmonster.com/2.4/"
width="1800px" report = {
{
dataSource: {
dataSourceType: "json",
data : this.getJsonData()
},
flexmonster.updateData({ data: jsonData }); where should i add this.? as i am using
<FlexmonsterReact.Pivot toolbar=”true”
componentFolder=”https://cdn.flexmonster.com/2.4/”
width=”1800px” report = {
{
dataSource: {
dataSourceType: “json”,
data : this.getJsonData()
},