matt@ridecell.com

Chart Type not Supported

Recommended Posts

I have read all of the postings on chart type not supported but have not been able to solve my problem. Also.. all of the JSFiddle examples you posted dont work.

Here is my file

 

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import './App.js';
import logos from './google_logo.png' // relative path to image
import Grid from './Grid_Icon.png' // relative path to image


import ReactDOM from 'react-dom';
import fusioncharts from 'fusioncharts';
// Load the charts module
import charts from 'fusioncharts/fusioncharts.charts';
import ReactFC from 'react-fusioncharts';


var attrs = {
  "caption": "Sales Comparison: 2013 versus 2014",
  "subCaption": "Harry's SuperMart",
  "numberprefix": "$",
  "plotgradientcolor": "",
  "bgcolor": "FFFFFF",
  "showalternatehgridcolor": "0",
  "divlinecolor": "CCCCCC",
  "showvalues": "0",
  "showcanvasborder": "0",
  "canvasborderalpha": "0",
  "canvasbordercolor": "CCCCCC",
  "canvasborderthickness": "1",
  "yaxismaxvalue": "30000",
  "captionpadding": "30",
  "linethickness": "3",
  "yaxisvaluespadding": "15",
  "legendshadow": "0",
  "legendborderalpha": "0",
  "palettecolors": "#f8bd19,#008ee4,#33bdda,#e44a00,#6baa01,#583e78",
  "showborder": "0"
};

var categories = [{
  "category": [{
      "label": "Jan"
  }, {
      "label": "Feb"
  }, {
      "label": "Mar"
  }, {
      "label": "Apr"
  }, {
      "label": "May"
  }, {
      "label": "Jun"
  }, {
      "label": "Jul"
  }, {
      "label": "Aug"
  }, {
      "label": "Sep"
  }, {
      "label": "Oct"
  }, {
      "label": "Nov"
  }, {
      "label": "Dec"
  }]
}];

var dataset = [{
      "seriesname": "2013",
      "data": [{
          "value": "22400"
      }, {
          "value": "24800"
      }, {
          "value": "21800"
      }, {
          "value": "21800"
      }, {
          "value": "24600"
      }, {
          "value": "27600"
      }, {
          "value": "26800"
      }, {
          "value": "27700"
      }, {
          "value": "23700"
      }, {
          "value": "25900"
      }, {
          "value": "26800"
      }, {
          "value": "24800"
      }]
  },
  {
      "seriesname": "2012",
      "data": [{
          "value": "10000"
      }, {
          "value": "11500"
      }, {
          "value": "12500"
      }, {
          "value": "15000"
      }, {
          "value": "16000"
      }, {
          "value": "17600"
      }, {
          "value": "18800"
      }, {
          "value": "19700"
      }, {
          "value": "21700"
      }, {
          "value": "21900"
      }, {
          "value": "22900"
      }, {
          "value": "20800"
      }]
  }
];

class App extends Component {
  render() {
    return (
      <div>
      <div id="box">
        <div id="logo">
            <img src={logos} alt={"logo"}/>
        </div>
        <div></div>
        <div id="Rider-Text" class="flexcontainer">
            Passengers to Date
        </div>
        <div class="clock"></div>
    ReactDOM.render(
        <ReactFC
        width="600"
        height="400"
        type="msline"
        chart="attrs"
        categories="categories"
        dataset="dataset" />,
        document.getElementById('chart-container')
    );
        <div id="Rider-Text" class="flexcontainer">
            Launched  |
        </div>
            <div id="Rider-Text-Small" class="flexcontainer">
            2/3/2015
        </div>
 <div id="chart-container">FusionCharts XT will load here!</div>
</div>
<div id="grid" class="flexcontainer">
       <a href="#"><img src={Grid} alt={"logo"}/></a>
</div>
</div>
    );

  }
}


export default App;
 

Edited by [email protected]

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