AnyChart Meteor Package

Quick Start
Examples
License

Quick start

Following console commands allow to create a Meteor Application with the AnyChart component pulled in.


meteor create sample-app
cd sample-app
meteor npm install
meteor add anychart:anychart
meteor

After meteor add anychart:anychart command is executed, anychart object becomes available in your project.

Demo overview

Here is a Simple Integration Demo with the step-by-step guide of how to work with AnyChart component in Meteor.

/data/DataSource.js

Provides an imitation of real data to be used as data source for demo. Since the DataSource is declared and exported, it can be used on the client.


export const DataSource = new Meteor.Collection('dataSource');

if(Meteor.isClient) {
  Meteor.startup(function() {
    if (!DataSource.find({}).fetch().length) {
      DataSource.insert({x: 'Department Stores', value: 6371664});
      DataSource.insert({x: 'Discount Stores', value: 7216301});
      DataSource.insert({x: 'Men\'s/Women\'s Stores', value: 1486621});
      DataSource.insert({x: 'Juvenile Specialty Stores', value: 786622});
      DataSource.insert({x: 'All other outlets', value: 900000});
    }
  });
}

/client/main.js

Gets data from DataSource and creates an AnyChart Pie chart using a global anychart object added to application with meteor add anychart:anychart command.


import { DataSource } from '../data/DataSource';
import { Template } from 'meteor/templating';
import './container.html';

var chart;

Template.acTemplate.rendered = function() {
  /*
    Get container for chart.
    It is not actually necessary here, `chart.container('container').draw();` can be used
    for current scope, but container is found in template to avoid container ID duplication.
   */
  var container = this.find("#container");

  // Turn Meteor Collection to simple array of objects.
  var data = DataSource.find({}).fetch();

  //  ----- Standard Anychart API in use -----
  chart = anychart.pie(data);
  chart.title('ACME Corp. apparel sales through different retail channels');

  chart.legend()
      .position('bottom')
      .itemsLayout('horizontal')
      .align('center')
      .title('Retail channels');

  chart.animation(true);
  chart.container(container).draw();
};

/client/main.html

Contains a document structure to work with. Contains an anychart container template.


<head>
  <title>Anychart Meteor Demo</title>
</head>

<body>
  {{> acTemplate}}
</body>

/client/container.html

Contains Meteor Template named acTemplate with container. After the template is rendered, it can be used as container for AnyChart chart.


<template name="acTemplate">
    <div id="container"></div>
</template>

/client/main.css

Default style for current demo


html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

AnyChart Meteor Package

Table of Contents

Quick start

Demo overview

License