Coder Social home page Coder Social logo

saurindashadia / fusioncharts-dist Goto Github PK

View Code? Open in Web Editor NEW

This project forked from fusioncharts/fusioncharts-dist

0.0 0.0 0.0 8.11 MB

FusionCharts JavaScript Charting library. Over 95+ charts and 1,400+ maps to choose from, with integrations available for all popular JavaScript frameworks & back-end programming languages.

Home Page: https://www.fusioncharts.com

JavaScript 100.00%

fusioncharts-dist's Introduction

FusionCharts is a JavaScript charting library providing 95+ charts and 2,000+ maps for your web and mobile applications. All the visualizations are interactive and animated, which are rendered in SVG and VML (for IE 6/7/8).

This package also contains FusionTime (timeseries charts), FusionWidgets (gauges, real-time charts), PowerCharts (statistical and advanced charts), and FusionMaps (choropleth geo maps).

What's New:

  • 🆕 Added Grouped Column (Multi-series Column) chart for FusionTime.
  • 🎨 Added CSS Styling for FusionTime.
  • 🆕 Added Umber theme.
  • Added improvements in Multi-Level Pie chart.
  • Introduction of an extensible approach to export chart as XLS data.
  • Improved Stacked Area chart representation for FusionTime.
  • Developer friendly and improved error messages for plot/axis configurations.
  • Better and improved themes to style more chart components.

Table of Contents

Installing FusionCharts

There are multiple ways to install FusionCharts. For general instructions, refer to this developer docs page.

Direct Download

All binaries are located on our github repository. You can also download zipped version here.

Using CDN

Instead of downloading, you can also use FusionCharts’s CDN to access files directly. See below for details

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>

Install from NPM

npm install --save fusioncharts

See npm documentation to know more about npm usage.

Getting Started

Easiest way to start with FusionCharts is to include the JavaScript library in your webpage, create a <div> container and chart instance, configure the data and render. Check this HTML snippet below:

<!doctype html>
<html>
<head>
    <script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
</head>
<body>
    <div id="chart-container"></div>
    <script>
        FusionCharts.ready(function () {
            // chart instance
            var chart = new FusionCharts({
                type: "column2d",
                renderAt: "chart-container", // container where chart will render
                width: "600",
                height: "400",
                dataFormat: "json",
                dataSource: {
                    // chart configuration
                    chart: {
                        caption: "Countries With Most Oil Reserves [2017-18]",
                        subcaption: "In MMbbl = One Million barrels"
                    },
                    // chart data
                    data: [
                        { label: "Venezuela", value: "290000" },
                        { label: "Saudi", value: "260000" },
                        { label: "Canada", value: "180000" },
                        { label: "Iran", value: "140000" },
                        { label: "Russia", value: "115000" },
                        { label: "UAE", value: "100000" },
                        { label: "US", value: "30000" },
                        { label: "China", value: "30000" }
                    ]
                }
            }).render();
        });
    </script>
</body>
</html>

Here’re links to quick start guides:

Using FusionCharts as an ES Module

FusionCharts can be loaded as an ES module via transpilers.

The following examples presumes you are using npm to install FusionCharts, see Install FusionCharts for more details.

import FusionCharts from 'fusioncharts/core'

// include chart from viz folder - import ChartType from fusioncharts/viz/[ChartType];
import Column2D from 'fusioncharts/viz/column2d';

// add chart as dependency - FusionCharts.addDep(ChartType);
FusionCharts.addDep(Column2D);

// instantiate the chart.
var chartInstance = new FusionCharts({
  type: 'Column2D',
  renderAt: "chart-container", // div container where chart will render
  width: "600",
  height: "400",
  dataFormat: "json",
  dataSource: {
      // chart configuration
      chart: {
        caption: "Countries With Most Oil Reserves [2017-18]",
        subcaption: "In MMbbl = One Million barrels"
      },
      // chart data
      data: [
        { label: "Venezuela", value: "290000" },
        { label: "Saudi", value: "260000" },
        { label: "Canada", value: "180000" },
        { label: "Iran", value: "140000" },
        { label: "Russia", value: "115000" },
        { label: "UAE", value: "100000" },
        { label: "US", value: "30000" },
        { label: "China", value: "30000" }
      ]
    }
});

// render the chart
chartInstance.render();

Want to render data-driven maps (FusionMaps) - check out this link.

Related Packages

Front-end Integrations
AngularJS (1.x and above) Github Repo Documentation
Angular (2.x and above) Github Repo Documentation
jQuery Github Repo Documentation
React Github Repo Documentation
Vue.js Github Repo Documentation
Ember Github Repo Documentation

Back-end Integrations
ASP.NET (C#) Github Repo Documentation
ASP.NET (VB) Github Repo Documentation
Java (JSP) Github Repo Documentation
Django Github Repo Documentation
PHP Github Repo Documentation
Ruby on Rails Github Repo Documentation

Using Themes

FusionCharts provides several out-of-the box themes that can be applied to all the charts to configure the visual appearance of the charts. Below is an example on how to use a theme:

<!doctype html>
<html>
<head>
    <script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    <script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
</head>
<body>
    <div id="chart-container"></div>
    <script>
        FusionCharts.ready(function () {
            // chart instance
            var chart = new FusionCharts({
                type: "column2d",
                renderAt: "chart-container", // container where chart will render
                width: "600",
                height: "400",
                dataFormat: "json",
                dataSource: {
                    // chart configuration
                    chart: {
                        caption: "Countries With Most Oil Reserves [2017-18]",
                        subcaption: "In MMbbl = One Million barrels",
                        theme: "fusion" //Specifying which theme to use
                    },
                    // chart data
                    data: [
                        { label: "Venezuela", value: "290000" },
                        { label: "Saudi", value: "260000" },
                        { label: "Canada", value: "180000" },
                        { label: "Iran", value: "140000" },
                        { label: "Russia", value: "115000" },
                        { label: "UAE", value: "100000" },
                        { label: "US", value: "30000" },
                        { label: "China", value: "30000" }
                    ]
                }
            }).render();
        });
    </script>
</body>
</html>

Using themes in ES6

import FusionCharts from 'fusioncharts/core'

// include chart from viz folder - import ChartType from fusioncharts/viz/[ChartType];
import Column2D from 'fusioncharts/viz/column2d';

// include theme from themes folder
import fusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion';

// add chart as dependency - FusionCharts.addDep(ChartType);
FusionCharts.addDep(Column2D);
FusionCharts.addDep(fusionTheme);

// instantiate the chart.
var chartInstance = new FusionCharts({
  type: 'Column2D',
  renderAt: "chart-container", // container where chart will render
  width: "600",
  height: "400",
  dataFormat: "json",
  dataSource: {
      // chart configuration
      chart: {
        caption: "Countries With Most Oil Reserves [2017-18]",
        subcaption: "In MMbbl = One Million barrels",
        theme: "fusion"
      },
      // chart data
      data: [
        { label: "Venezuela", value: "290000" },
        { label: "Saudi", value: "260000" },
        { label: "Canada", value: "180000" },
        { label: "Iran", value: "140000" },
        { label: "Russia", value: "115000" },
        { label: "UAE", value: "100000" },
        { label: "US", value: "30000" },
        { label: "China", value: "30000" }
      ]
    }
});

// render the chart
chartInstance.render();

See all the themes live here. Check out this link to know more about themes. Want us to build a theme to suit your corporate branding? Request one here!

FusionMaps

FusionMaps is a companion package meant to be used in conjunction with FusionCharts to render choropleth geo maps. FusionMaps provide over 2,000+ geographical maps, including all countries, US states, and regions in Europe for plotting business data like revenue by regions, employment levels by state and office locations. See below links to know more:

Going beyond Charts

  • Explore 20+ pre-built business specific dashboards for different industries like energy and manufacturing to business functions like sales, marketing and operations here.
  • See Data Stories built using FusionCharts’ interactive JavaScript visualizations and learn how to communicate real-world narratives through underlying data to tell compelling stories.

Version History

Contact Support

Fill this form or drop an email to [[email protected]](mailto: [email protected])

Folder Structure

fusioncharts/
  ├── core/ - Contains the FusionCharts core.
  ├── viz/ - Contains all the individual vizualizations (Column2D, SplineArea, AngularGauge etc.)
  ├── charts/ - Contains all the visualizations of the Charts package (similar to fusioncharts.charts.js).
  ├── powercharts/ - Contains all the visualizations of the PowerCharts package.
  ├── timeseries/ - Contains all the visualizations of the FusionTime package.
  ├── widgets/ - Contains all the visualizations of the FusionWidgets package.
  ├── maps/ - Contains the map renderer
  │   └── es/ - Contains the map definition files of World and USA
  └── themes/es - Contains all the theme files.

fusioncharts-dist's People

Contributors

rohitkr avatar ayanonly1 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.