Search the Community

FusionChart showing '' Loading chart. Please wait'' when rendered (React JS) $objFusionChart = new FusionCharts( 'Column3D', '898', '300', '0', '1' ); $strGraph = $objFusionChart->renderChart( false, false ); $strGraph has the the html content <script type="text/javascript" src="module/FusionCharts.js"></script> <div id="graph_data" class="sectionContainer report_graph"><!-- START Code Block for Chart 0 --> <div id="0Div">Chart</div> <script type="text/javascript" ><!-- // Instantiate the Chart if ( FusionCharts("0") && FusionCharts("0").dispose ) FusionCharts("0").dispose(); var chart_0 = new FusionCharts( { "swfUrl" : "/Common/fushion/fushion_charts/Column3D.swf", "width" : "898", "height" : "300", "renderAt" : "0Div", "dataFormat" : "xml", "id" : "0", "wMode" : "transparent", "dataSource" : "<chart showValues='0' showBorder='1' decimalPrecision='0' canvasbasedepth='10' bgcolor='FBFAFA' yAxisMinValue='0' yAxisMaxValue='5' showName='1' numDivLines='4' divlinecolor='C4C4C4' outCnvBaseFont='Arial' outCnvBaseFontSize='10' outCnvBaseFontColor='5A5863' canvasBaseColor='5A5863' baseFont='Arial' baseFontSize='10' baseFontColor='636363' canvasbgcolor='E4EBF4' hoverCapBgColor='eeeeee' borderColor='1D' borderThickness='1' xAxisName='Lead Events' yAxisName='Hits' ><set value='105' /><set value='827' /><set value='788' /><set value='441' /><set value='1' /><set value='38' /><set value='140' /></chart>" } ).render(); // --></script> <!-- END Script Block for Chart 0 --></div>

I am new here and I need suggestion so basically my requirements are I am using USA/state map so when I clicked any USA state it will trigger a new bar chart in another section and vice versa the data filter each time when I clicked any chart either world map or bar chart I know we can use event listener but here my concern is how data filter in another section suppose when I clicked any chart other chart data also trigger or filter and I am implementing through reactjs please help me this one thanks. I have attached a screenshot left side map when I clicked any USA state the right side bar chart also filter .

Hello everyone, I am new to FusionCharts and I am currently working on implementing a multilevelpie chart. I added the dataSource into state so that I can manipulate it later and I am simply rendering it. All I am seeying is "Loading chart. Please wait" and it doesn't change. I already tried verifing the location of the js files in the nodes_modules and I installed flash_player but nothing has changed. The code is in the App.js file. and the screen shot of what I am seeying . Node version: 12.16.2 Could you please me to solve this problem. thank you App.js

Hello, I am a reactjs user. I am trying to render zoomline chart. Even though I see all the values on the console log, the complete chart data is not being displayed. I also see a weird behavior on the X axis. This is more like a timeseries data. Have around 100 data points. the counter seem to be off. If you see the attached image, the category, is not increasing. Appreciate someone chiming in to see that could be wrong. Here is the data { "type": "zoomline", "width": "65%", "height": "400", "renderAt": "chart-container", "dataFormat": "json", "dataSource": { "chart": { "caption": "test", "yaxisname": "Distance", "xaxisname": "time (milliseconds)", "compactdatamode": "1", "linethickness": "1", "dataseparator": "|", "pixelsPerPoint": "40", "theme": "fusion" }, "annotations": { "groups": [] }, "categories": [{ "category": "0|499|1000|1499|1999|2500|3000|3500|4000|4500|4999|5499|5999|6499|6999|7499|7999|8499|8999|9499|10000|10500|11000|11500|12000|12500|13000|13500|14000|14500|15000|15500|16000|16500|17000|17500|18000|18500|19000|19500|19999|20499|20999|21499|21999|22499|22999|23499|23999|24499|24999|25499|25999|26499|0|466|966|1966|2466|2966|3466|3966|4466|4966|5466|5966|6466|6966|7466|7966|8466|8966|9466|9966|10466|10966|11966|12466|17133|17466|17633|17966|18133|18466|18633|18966|19133|19466|19633|19966|20133|20633|21133|21633|22133|22633|23133|23633|24133|24633|27133|27633|28133|28633|29133|30133|30633|31133|31633|32133|32633|33133|33333|33633|33800|34133|34300|34633|34800|35133|35300|35633|35800|36133|36300|36633|36800|37133|37300|37633|37800|38133|38300|38633|38800|39133|39300|39633|41300|41800|42300|43300|43800|44300|44800|45300|45800|46300|46800|47300|47800|48300|48800|51800|0|466|966|1466|1966|2466|2966|3466|3966|4466|4966|4966|5466|5466|5966|6466|6466|6966|6966|7466|7966|8466|8966|9466|9966|10466|10966|11466|11966|11966|12466|12466|12966|13466|13966|14467|14467|14967|14967|15467|15967|16467|16467|16967|16967|17467|17467|17967|17967|18467|18467|18967|19467|19467|19967|19967|20467|20467|20967|21467|21967|22467|22967|23467|23967|24467|24967|25467|25967|26467|26967" }], "dataset": [{ "seriesname": "Left", "data": "0.5104953050613403|0.5109076499938965|0.5218817591667175|0.494259774684906|0.4870876967906952|0.493447870016098|0.49510473012924194|0.5067327618598938|0.517367422580719|0.5186366438865662|0.5171878337860107|0.4655151069164276|0.5110040903091431|0.46559253334999084|0.5015982985496521|0.5015348196029663|0.3967580199241638|0.5114503502845764|0.39506906270980835|0.5128310322761536|0.5142257809638977|0.5248924493789673|0.5255659222602844|0.5362786054611206|0.5069510340690613|0.5050864219665527|0.537865161895752|0.5467922687530518|0.5462315082550049|0.5155147314071655|0.5818623900413513|0.5070918798446655|0.608193039894104|0.6309418678283691|0.6011539101600647|0.5957391262054443|0.48022139072418213|0.593639612197876|0.47338154911994934|0.5983350276947021|0.6040423512458801|0.6128160357475281|0.4814011752605438|0.6145380139350891|0.4829571843147278|0.6153458952903748|0.4776323735713959|0.6103111505508423|0.4926036596298218|0.6161202192306519|0.4838270843029022|0.6209113001823425|0.6152071952819824|0.4821721017360687|0.6169739961624146|0.4722222089767456|0.6243098974227905|0.4786856472492218|0.6177969574928284|0.6248062252998352|0.6271686553955078|0.6264920830726624|0.6279566287994385|0.6172358989715576|0.6274224519729614|0.6282520890235901|0.6243022084236145|0.6310877203941345|0.6262569427490234|0.629167377948761|0.6348291039466858" }, { "seriesname": "Right", "data": "0.5195684432983398|0.5319844484329224|0.5331531763076782|0.5038981437683105|0.4962214529514313|0.50296550989151|0.5045709013938904|0.5149251818656921|0.5239440202713013|0.5236392021179199|0.522319495677948|0.4655810594558716|0.5163400173187256|0.46305936574935913|0.507636308670044|0.5097091794013977|0.39844509959220886|0.5201183557510376|0.3897542357444763|0.5212022662162781|0.5234954357147217|0.533073902130127|0.5230565071105957|0.5358974933624268|0.5047615170478821|0.5030989646911621|0.535716712474823|0.545482873916626|0.5451497435569763|0.5237038731575012|0.5741243958473206|0.5196055173873901|0.6234520077705383|0.638012707233429|0.6052994728088379|0.6007309556007385|0.49467018246650696|0.5996771454811096|0.48378756642341614|0.6049549579620361|0.6112551093101501|0.6206474900245667|0.4835713803768158|0.6224745512008667|0.49296367168426514|0.6245874166488647|0.509536862373352|0.6208853721618652|0.4890725910663605|0.6274436116218567|0.4829174280166626|0.6318084597587585|0.6268883347511292|0.48970893025398254|0.6286619901657104|0.4907556474208832|0.6367518305778503|0.4811948835849762|0.6301906704902649|0.6377986669540405|0.6416488885879517|0.640739917755127|0.6422138810157776|0.6322091221809387|0.643447756767273|0.6439794301986694|0.6391440629959106|0.6463945508003235|0.6420060992240906|0.6457970142364502|0.6519283652305603" }] } }

So I'm using Multi Axis Line Chart with Date range changing option(1 Day, 7 Day, 1 Month, 3 Month, etc..). After creating this chart, whenever I try to change the date range, it gives me this error. What does it mean? Is it something to do with my chart options?

I am doing react native application. In that, I am trying to showing bar chart. So, I am using Fusion Chart, It is mandatory to use this library in my application. So, I followed this library installation and it was successful. But, Data is not showing at all. I have added annotations according to get my design. But, No data to display showing in screen even data is there. export default class App extends Component { constructor(props) { super(props); this.state = { type: 'bar2d', width: '100%', height: '100%', dataFormat: 'json', dataSource: { chart: { captionFontSize: '16', subcaptionFontSize: '14', showAlternatevGridColor: '0', numDivLines: '0', valueFontColor: '#ffffff', yAxisMinValue: '0', yAxisMaxValue: '100', showYAxisValues: '0', // "canvasBorderColor" : "#b3ffb3", canvasBgColor: '#ffffff,#e6eeff', canvasTopMargin: '100', paletteColors: '#990000', usePlotGradientColor: '1', plotGradientColor: '#ff8080', divLineAlpha: '0', plotSpacePercent: '60', useDataPlotColorForLabels: '1', showPercentInTooltip: '0', showLegend: '1', showLabels: '0', showValues: '0', placeValuesInside: '1', showBorder: '0' }, data: [ { label: 'Travel & Leisure', value: '41' }, { label: 'Advertising/Marketing/PR', value: '39' }, { label: 'Other', value: '38' }, { label: 'Real Estate', value: '32' }, ], annotations: { showBelow: '0', autoScale: '1', groups: [{ id: 'user-images', items: [{ id: 'dyn-label-bg', color: '#000000', align: 'left', type: 'text', text: 'Best when calm', x: '$canvasStartX+0', y: '$dataset.0.set.0.ENDY-0' }, { id: 'dyn-label-bg', color: '#000000', align: 'left', type: 'text', text: 'Very Relaxed', x: '$canvasStartX+00', y: '$dataset.0.set.1.ENDY-0' }, { id: 'dyn-label-bg', color: '#000000', align: 'left', type: 'text', text: 'Mellow', x: '$canvasStartX+00', y: '$dataset.0.set.2.ENDY-0' }, { id: 'dyn-label-bg', color: '#000000', align: 'left', type: 'text', text: 'Out of Control', x: '$canvasStartX+00', y: '$dataset.0.set.3.ENDY-0' }] }] } } }; this.libraryPath = Platform.select({ // Specify fusioncharts.html file location ios: require('./assets/fusioncharts.html'), //android: { uri: 'file:///android_asset/fusioncharts.html' }, }); } render() { return ( <View style={styles.container}> <Text style={styles.heading}> FusionCharts Integration with React Native </Text> <View style={styles.chartContainer}> <FusionCharts type={this.state.type} width={this.state.width} height={this.state.height} dataFormat={this.state.dataFormat} dataSource={this.state.dataSource} libraryPath={this.libraryPath} // set the libraryPath property /> </View> </View> ); } } Here is the link which I created in stackoverflow query. https://stackoverflow.com/questions/54785081/fusion-chart-showing-no-data-to-display-in-react-native I got stuck due to this issue from 2 days, Can anyone help me to fix this. Its urgent work. Thanks