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