Anilkumar

Fusion chart showing No Data to display in React Native

Recommended Posts

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

Edited by Anilkumar

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now