notryanb / highcharts_date_range_grouping Goto Github PK

View Code? Open in Web Editor NEW

6.0 6.0 1.0 197 KB

A Highcharts plugin to group datasets by date ranges and aggregate results (ie. weekly, monthly, daily)

License: MIT License

JavaScript 94.94% CSS 5.06%

highcharts_date_range_grouping's People

Contributors

Stargazers

Watchers

Forkers

adamxwarlock

highcharts_date_range_grouping's Issues

How to use highcharts_date_range_grouping

I used your plugin "Date range grouping" ,
I did not understand how it works and really; why if I choose to sort by month or week or day the values of series are modified and the scale also, according to what it changes .thanks

Changing date formats

The example from the fiddle.

var categories = [
  //"Tue Feb 02 2016 07:00:00 GMT+0100 (CET)"
  '2017-01-01 00:00:00 GMT-0500 (EST)',
  '2017-01-02 00:00:00 GMT-0500 (EST)',
  '2017-01-03 00:00:00 GMT-0500 (EST)',
  '2017-01-04 00:00:00 GMT-0500 (EST)',
  '2017-01-05 00:00:00 GMT-0500 (EST)',
  '2017-01-06 00:00:00 GMT-0500 (EST)',
  '2017-01-07 00:00:00 GMT-0500 (EST)',
  '2017-01-08 00:00:00 GMT-0500 (EST)',
  '2017-01-09 00:00:00 GMT-0500 (EST)',
  '2017-01-10 00:00:00 GMT-0500 (EST)',
  '2017-01-11 00:00:00 GMT-0500 (EST)',
  '2017-01-12 00:00:00 GMT-0500 (EST)',
  '2017-02-01 00:00:00 GMT-0500 (EST)',
  '2017-02-02 00:00:00 GMT-0500 (EST)',
  '2017-02-03 00:00:00 GMT-0500 (EST)',
  '2017-02-04 00:00:00 GMT-0500 (EST)',
  '2017-02-05 00:00:00 GMT-0500 (EST)',
  '2017-02-06 00:00:00 GMT-0500 (EST)',
  '2017-02-07 00:00:00 GMT-0500 (EST)',
  '2017-02-08 00:00:00 GMT-0500 (EST)',
  '2017-02-09 00:00:00 GMT-0500 (EST)',
  '2017-02-10 00:00:00 GMT-0500 (EST)',
  '2017-02-11 00:00:00 GMT-0500 (EST)',
  '2017-02-12 00:00:00 GMT-0500 (EST)',
  '2017-03-01 00:00:00 GMT-0500 (EST)',
  '2017-03-02 00:00:00 GMT-0500 (EST)',
  '2017-03-03 00:00:00 GMT-0500 (EST)',
  '2017-03-04 00:00:00 GMT-0500 (EST)',
  '2017-03-05 00:00:00 GMT-0500 (EST)',
  '2017-03-06 00:00:00 GMT-0500 (EST)',
  '2017-03-07 00:00:00 GMT-0500 (EST)',
  '2017-03-08 00:00:00 GMT-0500 (EST)',
  '2017-03-09 00:00:00 GMT-0500 (EST)',
  '2017-03-10 00:00:00 GMT-0500 (EST)',
  '2017-03-11 00:00:00 GMT-0500 (EST)',
  '2017-12-12 00:00:00 GMT-0500 (EST)'
  ].map(function(date) {
    let formatOptions = { month: '2-digit', day: '2-digit', year: 'numeric' };
    return new Date(date).toLocaleDateString('nl', formatOptions); 
  });
  
Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  dateRangeGrouping: {
  	dayFormat: { month: 'short', day: '2-digit', year: 'numeric' },
    weekFormat: { month: 'short', day: '2-digit', year: 'numeric' }, 
    monthFormat: { month: 'short', year: 'numeric'  }   
  },
  title: {
    text: 'Average Temperature Date'
  },
  xAxis: {
    categories: categories
  },
  yAxis: {
    title: {
      text: 'Temperature (°C)'
    }
  },
  plotOptions: {
    line: {
      dataLabels: {
        enabled: true
      },
      enableMouseTracking: false
    }
  },
  series: [{
    name: 'City A',
    data: [
      7.0, 6.0, 9.0, 14.0, 18.0, 21.0, 25.0, 26.0, 23.0, 18.0, 13.0, 9.0,
      3.0, 4.0, 5.0, 8.0, 11.0, 15.0, 17.0, 16.0, 14.0, 10.0, 6.0, 4.0,
      31.0, 43.0, 34.0, 22.0, 19.0, 11.0, 20.0, 76.0, 54.0, 16.0, 26.0, 14.0
    ]
  }]
});

If I try to add an date bigger than 12, for example

'2017-25-12 00:00:00 GMT-0500 (EST)'

I get error like this:

How to solve that?

Configureable tickInterval

tickInterval is hardcoded into each range. These should instead be defaults, but also allow for custom overrides.

Configureable date string formatting

x-axis string formatting is hardcoded
allow for date string hashes to be passed per toLocaleDateString() specs.

Custom targets for button rendering

In some cases, the user may want to render the button menu into another dom node to keep layout consistent.

Add option to render into a node with attr || id?

Unable to use highcharts_date_range_grouping

Hi Is very useful for the Date Range, But How you use this in My Project, When i use your library in my project in min.js, I am getting this Error, (Highcharts) is not defined.
Can you please help in this?

How to start Week from Monday and end on Sunday

Its great plugin, however I wanted to start week from Monday inplace of Sunday, how it can be configured?

Download chart image options do not work when grouped weekly/monthly

Pretty impressive plug-in.

You can see in the screenshot attached, I have highlighted options that do not work.

Data Aggregation

An option to decide on how the data is aggregated would be great, such as average, min, max etc.

Recommend Projects

React

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

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

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.