Ember Charts 3.5 2.3 L2 JavaScript A powerful and easy to use charting library for Ember.js

Overview

Ember Charts Build Status

A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to extend and modify. The out-of-the-box behavior these chart components represents our thoughts on best practices in chart interactivity and presentation.

Demo and Documentation

https://opensource.addepar.com/ember-charts/

Getting Started

JS Bin Starter Kit

https://emberjs.jsbin.com/rekawobugu/1/edit

Unfortunately, this version of Ember Charts is out of date, and the current maintainers of Ember Charts at Addepar have not been able to update it recently.

Installation with Ember CLI (Recommended)

Ember Charts is an Ember CLI addon published to the public NPM repository at https://www.npmjs.com/package/ember-charts , so it can be installed like so:

# ember-cli >= 0.2.0
ember install:addon ember-charts

# ember-cli >= 0.2.3
ember install ember-charts

Once it's installed, you can customize the look of Ember Charts with CSS.

Installation with Bower (Globals-Based Version)

npm install -g bower      # install Bower
bower install ember-charts --save

Using Ember Charts with bower is deprecated and will eventually be removed. We recommend that you migrate your apps to Ember CLI! Documentation has been updated to show Ember CLI usage. If you need documentation for globals-based use, please check out version 0.5.0 of Ember Charts and follow the setup instructions under "Running Old Versions" to display the old guides.

Developing or Testing

After cloning this repo, install dependencies and run the demo application:

yarn
bower install
ember serve

Now you can:

Dependencies

  • ember
  • lodash
  • d3
  • jquery-ui

Browser Support

We aim to support the last two major versions of every common browser.

If you need to support further browsers, we welcome pull requests with fixes.

Touch support may work but has not been tested.

Contributing

Got something to add? Great! Bug reports, feature ideas, and (especially) pull requests are extremely helpful, and this project wouldn't be where it is today without lots of help from the community.

Please read the contribution guidelines for directions on opening issues and working on the project.

Versioning

Ember Charts uses Semantic Versioning to keep track of releases using the following format:

<major>.<minor>.<patch>

In a nutshell, this means:

  • Breaking changes to the API or behavior increases the major version
  • Adding functionality in a backwards-compatible way increases the minor version
  • Making backwards-compatible bug fixes increases the patch version

Releasing a New Version (For Maintainers)

Prior to releasing, ensure that the CHANGELOG.md is updated to track any changes that have been made since the prior release.

We increment version numbers and release using release-it:

npm run release -- <options>

The local configuration file for release-it is named .release-it.json, found in the root directory of the repository.

By default, release-it without options will increment the version number (X.Y.Z --> X.Y.(Z+1)) in the VERSION file and package.json file, and then commit the resulting changes to the ember-charts git repository.

If you want to control the version number, use these options:

npm run release -- major # 1.2.3 -> 2.0.0
npm run release -- minor # 1.2.3 -> 1.3.0
npm run release -- X.Y.Z # 1.2.3 -> X.Y.Z

Ember Charts has also configured release-it to automatically update the gh-pages branch (from which the demo and documentation website is published). This is done by pushing the /ember-dist/ directory after constructing it with ember build. These commands can be seen in the .release-it.json file.

release-it is also configured to automatically publish the updated version to npm.

Lastly, the new version should be released on Github, which can be done via the Github UI after the steps above are complete.

Copyright and License

Copyright © 2013 Addepar, Inc. All Rights Reserved

Licensed under the BSD License (the "License"); you may not use this work except in compliance with the License. You may obtain a copy of the License in the LICENSE.md file.

Comments
  • [Dynamic X-Axis] Dynamic X-Axis labelling for Time Series Charts

    [Dynamic X-Axis] Dynamic X-Axis labelling for Time Series Charts

    Description

    Before, the labels along the x axis were generated using the selected interval (months, years, quarters...). This can lead to issues where the selected interval is not specific enough that the time series chart only has a few labels on the x axis with not enough specificity.

    This feature dynamically generates the labels along the x axis given a maxNumberOfLabels parameter that increases the specificity until there are enough labels along the x axis. For example, if the time range spans a period of 2 years, the labels should not be year based as it would result in only two labels. The specificity should be increased to be month based.

    The example website was also changed so the example time series chart includes the option to play around with the dynamic x axis.

    @mgreenbaum @billy-addepar @mauriziocalo @sicasli @liuyang-li

    UI Pics

    Chart without dynamic x axis ticked. Note how the tick interval being set to years means that the labelling is pretty sparse along the x axis. image


    Dynamic x axis is ticked. This disables the tick interval (which is irrelevant when a dynamic x axis is used) and it also introduces a slider to adjust the maximum number of labels along the x axis. Here, there are a max of 14 labels across the x axis so the specificity is increased to the month level to generate the labels. image


    The max number of labels is now set to 7. This changes the specificity to quarters and distributes those labels across the x axis. image

    opened by chen-ben 23
  • Adjust pie chart offset to avoid overlapping labels

    Adjust pie chart offset to avoid overlapping labels

    To reduce the chance of overlapping labels, the pie chart's startOffset defaults to Math.PI / 4 so that the smaller labels are likely to appear towards the right side of the chart, where there is more space.

    Also, redraw the chart when startOffset changes. This makes it easy to specify and change the rotation of the chart.

    Before: image

    After: image

    @Addepar/fire

    opened by pnachum 18
  • Please provide a Hello World example

    Please provide a Hello World example

    Ember Charts looks way cool, but I'm finding the project overly complicated and the documentation overly lacking. Could you please provide a hello world example that displays a simple chart with some data and nothing else? Please no fancy build systems, no coffee script, etc. Just raw EmberJS like you see in the EmberJS guides.

    opened by BryanHunt 16
  • Fix issue where time series chart doesn't render after data loads

    Fix issue where time series chart doesn't render after data loads

    Right now it's possible for a time series chart to fail to render on page load. This occurs because the renderVars observers added in ChartComponent.init aren't firing, which occurs because the 'finishedData' observers don't fire unless you actually consume it somewhere.

    @Dylnuge @azirbel

    opened by igillis 14
  • Better handle labels in horizontal bar when values are negative

    Better handle labels in horizontal bar when values are negative

    @Addepar/fire @xudaniel11work

    For horizontal bar charts with a mix of negative and positive values, labels were incorrectly being truncated even though there was plenty of space.

    Before image

    After image

    opened by pnachum 11
  • Make separate flag for controlling the x & y axis title + Support padding for axis title

    Make separate flag for controlling the x & y axis title + Support padding for axis title

    This PR aims to do:

    • Split the hasAxisTitles into hasXAxisTitle and hasYxisTitle to have more granular configuration for X & Y axis titles
    • The current measurement for X axis title is not correct and does not take into account of the legend padding for axis title. This PR makes legendChartPadding to be dependent on height of axis titles. The legendChartPadding is move from scatter-chart.js into axis-titles.js mixin.

    @jordansmith42 @philpee2 @embooglement

    opened by billy-addepar 11
  • Ember 1.3.1 compatibility

    Ember 1.3.1 compatibility

    First of all, this is a great package. It has been super-helpful in getting my reporting site up and going.

    Today, I upgraded my site from Ember 1.2 to 1.3.1. I'm now getting this error in my browser console when I run the working code I ran before to render charts:

    • 12:45:35.905 Error: assertion failed: You must use Ember.set() to access this property (of Ember.Charts.VerticalBarComponent:ember2047) ember.js:836
    • 12:45:35.905 Error: assertion failed: You called yield in a template that was not a layout

    Are there people working on getting ember-charts compatible with the latest Ember version? If so, any sense when it might be released?

    Bryan

    opened by bkCDL 11
  • Ember 1.9, 1.10+ Support

    Ember 1.9, 1.10+ Support

    Ember 1.9 included an upgrade from Handlebars 1.0 to Handlebars 2.0, and Ember 1.10 replaced the templating library with HTMLBars. Because ember-charts packages pre-compiled templates in our dist files, it's not possible for us to support future versions of Ember while also continuing to support users of ember-charts who have not yet upgraded.

    Our ideal strategy for dealing with this problem is to move to ember-cli, however we need a solution for the meantime and we need a solution that supports ember-charts users who are not on ember-cli and are planning to continue using our globals build.

    @ebryn, @azirbel, @igillis and I have all discussed this and come up with the following strategy:

    • The current code on ember-charts master, which includes dist files that work with Ember 1.8 and earlier, will be released one last time as ember-charts 0.4.0. This will be the final ember-charts release to support Ember 1.8 and earlier. (Update: this has now been done)
    • The Handlebars 2.0 upgrade (#65) will be merged, and released as ember-charts 0.5.0. This will be the only release of ember-charts to support Ember 1.9.
    • The HTMLBars upgrade (#76) will be merged, and released as ember-charts 0.6.0. This will be the first version of ember-charts to support Ember 1.10+. Going forward, all future releases of ember-charts will be compiled for Ember 1.10+.

    For users who are still on versions of Ember before 1.10, our recommended action is to upgrade as soon as possible. In the meantime, as new features and bugfixes are brought into the ember-charts library, it will remain possible to manually cherry-pick them and build your own dist files for older versions of Ember.

    discussion 
    opened by dylnuge 10
  • There was a bug with Minor Ticks 🐛

    There was a bug with Minor Ticks 🐛

    There was a bug with Minor Ticks that arose from a complication with how D3 manages selections. This issue only occurs in the axis is made smaller (eliminating labels) and then made larger again.

    image

    And here is the state of the DOM:

    <g class="tick" transform="translate(185.39634888126415,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text y="9" x="0" dy="0.71em" style="text-anchor: middle; display: block;">Dec '14</text></g>
    <g class="tick" transform="translate(334.4525531050245,0)" style="opacity: 1;"><line y2="12" x2="0"></line><text y="9" x="0" dy="0.71em" style="text-anchor: middle; display: none;">Dec '15</text></g>
    <g class="tick" transform="translate(110.4428580586997,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text y="9" x="0" dy="0.71em" style="text-anchor: middle; display: block;">Jun '14</text></g>
    <g class="tick" transform="translate(259.49906228246005,0)" style="opacity: 1;"><line y2="12" x2="0"></line><text y="9" x="0" dy="0.71em" style="text-anchor: middle; display: none;">Jun '15</text></g>
    
    opened by shiller-addepar 9
  • RFC: Moving Ember-Charts to Angular

    RFC: Moving Ember-Charts to Angular

    Hey everyone,

    It's great to see so many people using and enjoying ember-charts. When this project was first started, we never expected the attention and support we're now getting.

    We've been spending a lot of time recently discussing how to port things to ember-cli, upgrade to Ember 1.9 and 1.10, and a whole lot more, and we've come to a conclusion.

    We clearly are big fans of porting things around and spending time working on upgrades. Once we're on ember-cli, these things will become a thing of the past. Thanks to Ember's "stability without stagnation" mission, we'll never have to worry about complicated upgrade processes. Even upgrading to 2.0 should be painless.

    We don't want this. I think it goes without saying, but I'll say it anyways: no pain, no gain.

    We're therefore planning to move this whole repository over to Angular 1.0 now, and upgrade to Angular 2.0 when it's ready. This should give us years of additional pain. Hopefully Angular 3.0 will be ready by the time we're on 2.0 to keep us constantly burning off those code calories.

    In order to avoid any confusion, we will be keeping the name the same! "ember-charts" will still be the same Ember Charts library you know and love, just now in Angular.

    Please let us know what you think!

    discussion 
    opened by dylnuge 9
  • Daniel/horizontal bar negative value labels

    Daniel/horizontal bar negative value labels

    When a horizontal bar chart has all data less than or equal to zero, all grouping labels should be on the right and all value labels should be on the left. However, all rows with data = 0 used to have grouping labels on the left and value labels on the right. The PR fixes this pre-existing bug.

    @Addepar/fire , @philpee2 , @jordansmith42

    Before Change: Note that Label 1 and Label 6 are on the left instead of right when all data is <= 0 screenshot 2015-11-26 15 42 02

    After Change: Note that Label 1 and Label 6 are with the rest of the labels when all data is <= 0 screenshot 2015-11-26 15 45 39

    Same as before: For mixes of positive and negative data, rows with value of 0 will have the grouping label on the left and the value label on the right. screenshot 2015-11-26 15 54 50

    opened by xudaniel11work 8
  • Update `alias` to use `legacyAlias`

    Update `alias` to use `legacyAlias`

    This package relies on alias behavior from pre 1.6 Ember..

    https://github.com/emberjs/ember.js/issues/9265#issue-44757560

    This replicates the old behavior by implementing alias as a computed. In the main application where ember-charts is used this is already being done, and this package on the whole may not even work without this change.

    In order to get the codemod I wrote to fix the alias I needed to first run https://github.com/ember-codemods/ember-modules-codemod which converted the global use to the module import use

    opened by rondale-sc 1
  • Bump eslint-utils from 1.4.0 to 1.4.3

    Bump eslint-utils from 1.4.0 to 1.4.3

    Bumps eslint-utils from 1.4.0 to 1.4.3.

    Release notes

    Sourced from eslint-utils's releases.

    v1.4.3

    🐛 Bug fixes

    • 8f9e481ecc1204c7a1331b697f97903f90c75154 fixed false positive of ReferenceTracker.

    v1.4.2

    🐛 Bug fixes

    • e4cb01498df6096b66edb0c78965ee6f47d3ac77 fixed a regression of the previous release.

    v1.4.1

    🐛 Bug fixes

    • c119e832952c8c653bd4f21e39eb9f7ce48e5947 fixed getStaticValue() function to handle null literal correctly even if runtimes don't support BigInt natively.
    • 587cca2f82c245f5fc4a8b9fb2cf6b35c0d02552 fixed getStringIfConstant() function to handle regular expression literals and BigInt literals even if runtimes don't support those.
    • 08158db1c98fd71cf0f32ddefbc147e2620e724c fixed GHSA-3gx7-xhv7-5mx3.
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump mixin-deep from 1.3.1 to 1.3.2

    Bump mixin-deep from 1.3.1 to 1.3.2

    Bumps mixin-deep from 1.3.1 to 1.3.2.

    Commits
    Maintainer changes

    This version was pushed to npm by doowb, a new releaser for mixin-deep since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump acorn from 5.7.3 to 5.7.4

    Bump acorn from 5.7.3 to 5.7.4

    Bumps acorn from 5.7.3 to 5.7.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
An easy-to-use cross-framework JS charting library

Compact Chart Visualize your data under a minute, in any Javascript framework Table of Contents About How to use it Examples Demo Plain HTML Example w

Mireo 1 Jul 28, 2021
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 9, 2023
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 5, 2023
Smoothie Charts: smooooooth JavaScript charts for realtime streaming data

Smoothie Charts is a really small charting library designed for live streaming data. I built it to reduce the headaches I was getting from watching ch

Joe Walnes 2.2k Dec 13, 2022
A simple ember component for adding Charts

Ember Chart This Ember CLI addon is a simple wrapper for ChartJS (v2.9). Compatibility Ember.js v3.12 or above Ember CLI v2.13 or above Node.js v10 or

Ahmed Omran 136 Oct 24, 2022
Open-source JavaScript charting library behind Plotly and Dash

Plotly.js is a standalone Javascript data visualization library, and it also powers the Python and R modules named plotly in those respective ecosyste

Plotly 15.3k Jan 4, 2023
Simple package to facilitate and automate the use of charts in Laravel 5.x using Chartjs v2 library

laravel-chartjs - Chart.js v2 wrapper for Laravel 5.x Simple package to facilitate and automate the use of charts in Laravel 5.x using the Chart.js v2

Felix Costa 473 Dec 15, 2022
:dango: An interactive and responsive charting library

English | 简体中文 G2Plot A charting library based on the Grammar of Graphics. G2Plot is an interactive and responsive charting library. Based on the gram

AntV team 2.3k Dec 30, 2022
📱📈An elegant, interactive and flexible charting library for mobile.

中文 README F2 is born for mobile, developed for developers as well as designers. It is Html5 Canvas-based, and is also compatible with Node.js, Weex an

AntV team 7.8k Dec 31, 2022
📱📈An elegant, interactive and flexible charting library for mobile.

F2,一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(node, 小程序,weex)。完备的图形语法理论,满足你的各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。英文 README 在此衷心感谢《The Grammar of Graphics》的作者

AntV team 7.8k Dec 27, 2022
A reusable charting library written in d3.js

NVD3 - A reusable D3 charting library Inspired by the work of Mike Bostock's Towards Reusable Charts, and supported by a combined effort of Novus and

Novus 7.2k Jan 3, 2023
Liquify charting library

Liquify Liquify: fast, multi-threaded visualization of stream data with ChartJS & Angular. The aim of Liquify is to provide a fast, customizable and e

null 4 Aug 23, 2022
React components for Chart.js, the most popular charting library

react-chartjs-2 React components for Chart.js, the most popular charting library. Supports Chart.js v3 and v2. Quickstart • Docs • Slack • Stack Overf

null 5.6k Jan 4, 2023
A server-side-rendered charting library for Fresh

fresh_charts A server side rendered charting library for Fresh based on Chart.js. Usage There are two main ways to render a chart. There is the JSX/TS

Deno 57 Jan 2, 2023
Highcharts JS, the JavaScript charting framework

Highcharts JS is a JavaScript charting library based on SVG, with fallbacks to VML and canvas for old browsers. Official website: www.highcharts.com D

Highsoft 10.9k Jan 9, 2023
Simple yet flexible JavaScript charting for designers & developers

Simple yet flexible JavaScript charting for designers & developers Documentation All the links point to the new version 3 of the lib. Introduction Get

Chart.js 59.4k Jan 10, 2023
Free Bootstrap 5 Admin and Dashboard Template that comes with all essential dashboard components, elements, charts, graph and application pages. Download now for free and use with personal or commercial projects.

PlainAdmin - Free Bootstrap 5 Dashboard Template PlainAdmin is a free and open-source Bootstrap 5 admin and dashboard template that comes with - all e

PlainAdmin 238 Dec 31, 2022
Makes waterfall charts easy with chartjs-2

Installation npm install --save chartjs-plugin-waterfall Here's what it looks like: Usage Just import the plugin and add it to any chart that you want

Ziegert Group 10 Jul 16, 2022
A web application to 🔍inspect your GitHub Profile Stats📊 in a lucid way. Visualization made easy with Charts💡🚀

know-your-gitstats A web application to ?? inspect your GitHub Profile Stats ?? in a lucid way. Visualization made easy with Charts ?? ?? . ✅ Features

Shubham Jadhav 46 Oct 15, 2022