Git Product home page Git Product logo

meteorcharts's Introduction

MeteorCharts

Website: www.meteorcharts.com

Next Generation Charting Framework

MeteorCharts is the next generation charting framework for the web. It uses an abstract layer for data binding, and therefore supports any rendering technology of your choice, including HTML5 Canvas, WebGL, SVG, VML, and Dom. MeteorCharts excels in places where other charting libraries fall short, most notably with performance, extensibility, and mobile support

  • Performance - Performance is our biggest priority. Need to render over a million data points per second? No problem.
  • Extensibility - Most other charting libraries out there generate charts with giant configurations that require users to define how certain components look, where they are placed, what colors they are, etc. Nice in theory, but this absolutely does not scale. In order for this type of approach to work in real life, the developers of those libraries will have to know in advance all of the possible combinations of components and interactivity for all charts in the universe, in order to make them configurable. Not going to happen. MeteorCharts decouples components, layouts, and themes so that it's easy to create any kind of chart that you can imagine. It's like having a giant bucket of charting components that you stick together, and it just works.
  • Mobile - MeteorCharts was developed with mobile and tablet experiences as 1st class citizens. Drop a chart in your website, and it will work great on desktop browsers, mobile devices, and tablets.

Quick Start

The fastest way to get a chart up and running is to use a pre-built theme and layout. Themes define colors and font sizes in your chart. Layouts define position, size, and bindings of components inside your chart.

var chart = new MeteorChart({
  container: 'container',
  width: 500,
  height: 290,
  theme: MeteorChart.Themes.CoteAzur,
  layout: MeteorChart.Layouts.SparkChart,
  components: {
    lineSeries: {
      data: [
        {
          // red
          title: 'Series 1',
          points: [
            -100, -100,
            100, 100,
            200, 50
          ]
        },
        { 
          // green
          title: 'Series 2',
          points: [
            0, 100,
            100, 200,
            200, 150,
            300, 200
          ]
        }
      ]
    }
  }
});

Terminology

  • Component - a component is a graphical element inside of a chart. Some examples of pre-built components include Title, Line, Axis, Tooltip, Scatter, etc. It's also really easy to create your own components
  • Layout - layouts define the position, size, and data source of components in the chart through data binding. Some examples of pre-built layouts include StandardLineChart, StandardLineChartWithTitle, SparkChart, and InteractiveLineChart. It's also really easy to create your own layouts.
  • Theme - themes define the color palette and fonts used in your chart. Some exmaples of pre-built themes include CoteAzure and Lollapallooza. It's easy to create your own themes as well.
  • Data - most components require data to render. For example, if you're creating a standard line chart, the data for the line component is a series of data points. The data for the x and y axis is bound to the line component data. And the data for the title component is just a string, like "This is my chart title".
  • Style - Style attributes can be used to specify the look of feel of individual components.
  • Formatter - formatters are used to format data into human readable strings. For example, if you're creating a line chart with dates along the x-axis, you'll want to use the Date formatter to convert the unix timestamps into human readable dates. Formatters can also be used with other components, such as tooltips.

Building the Project

In the root directory, run npm install. Once that finishes, you can run grunt dev to build the development version.

Full Examples

Once you've built the MeteorCharts framework, you can start the node server by going to the root directory and running node server.js. Once the server has started, you can open up your favorite browsers and go to localhost:1337/examples/index.html to see a list of all the examples

meteorcharts's People

Contributors

ericdrowell avatar

Watchers

James Cloos avatar  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.