{"id":45310355,"url":"https://github.com/pmeisen/js-gantt","last_synced_at":"2026-02-21T07:01:26.207Z","repository":{"id":28215003,"uuid":"31719009","full_name":"pmeisen/js-gantt","owner":"pmeisen","description":"Library to create simple charts visualizing time intervals with rich configuration capabilities and easy adaptable data loading.","archived":false,"fork":false,"pushed_at":"2017-09-06T02:18:15.000Z","size":1663,"stargazers_count":30,"open_issues_count":1,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2026-01-23T21:58:12.667Z","etag":null,"topics":["activities","activity","activity-chart","chart","gantt","gantt-chart","interval","intervals","javascript","js-gantt","svg","task","task-chart","tasks","time-interval","time-interval-data","time-intervals","timeinterval","visualization"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pmeisen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-05T14:55:33.000Z","updated_at":"2025-10-24T06:14:57.000Z","dependencies_parsed_at":"2022-08-31T04:22:51.061Z","dependency_job_id":null,"html_url":"https://github.com/pmeisen/js-gantt","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/pmeisen/js-gantt","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmeisen%2Fjs-gantt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmeisen%2Fjs-gantt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmeisen%2Fjs-gantt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmeisen%2Fjs-gantt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pmeisen","download_url":"https://codeload.github.com/pmeisen/js-gantt/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmeisen%2Fjs-gantt/sbom","scorecard":{"id":738744,"data":{"date":"2025-08-11","repo":{"name":"github.com/pmeisen/js-gantt","commit":"6aff3eb02aae43ded30b11ee8e000e383dbd419d"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}}]},"last_synced_at":"2025-08-22T16:42:54.788Z","repository_id":28215003,"created_at":"2025-08-22T16:42:54.788Z","updated_at":"2025-08-22T16:42:54.788Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29675909,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T06:23:40.028Z","status":"ssl_error","status_checked_at":"2026-02-21T06:23:39.222Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["activities","activity","activity-chart","chart","gantt","gantt-chart","interval","intervals","javascript","js-gantt","svg","task","task-chart","tasks","time-interval","time-interval-data","time-intervals","timeinterval","visualization"],"created_at":"2026-02-21T07:00:59.716Z","updated_at":"2026-02-21T07:01:26.188Z","avatar_url":"https://github.com/pmeisen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# js-gantt\n[![Bower version](https://badge.fury.io/bo/js-gantt.svg)](https://badge.fury.io/bo/js-gantt)\n[![npm version](https://badge.fury.io/js/js-gantt.svg)](https://badge.fury.io/js/js-gantt)\n[![Build Status](https://travis-ci.org/pmeisen/js-gantt.svg?branch=master)](https://travis-ci.org/pmeisen/js-gantt)\n\nLibrary to create time interval data charts, easily, simple and highly configurable. The created charts can be used to visualize large time interval datasets. \nThe rich configuration allows among other things:\n- customizable axes labeling,\n- modifiable sizing for all visual components (i.e., intervals, swim-lanes, chart, axes)\n- rule-based coloring,\n- tooltip configuration, and\n- many many more.\n\n## How to Install\n\nThe library can be used with `bower`, `requireJs` or as individual `JavaScript Import`. The following paragraphs \nexplain how to use the library in the different scenarios.\n\n### Using js-gantt with `bower`\n\n```\nbower install --save js-gantt\n```\n\nThe library will be added to your `bower-components`. By default the `js-gantt.js` is selected as single main file, which is the\nnot minified version of the library (the minified/uglified version is `js-gantt.min.hs`). Examples on how to use the library can \nbe found [here](#usage-examples).\n\n### Using js-gantt with `requireJs`\n\nIf you are building larger web-applications and you want to enjoy the advantage of [requireJs](http://requirejs.org/), you\nneed to include the sources (and not the optimized libraries). To do so, you may download the tarball or a zip-archive from \nGitHub and place it into your `scripts` folder. You can also utilize `npm` or `bower` to download the sources automatically \nand override the `main` configuration (see [here](#advanced-bower-and-requirejs)). You can then require the needed library as following:\n\n```javascript\nrequire(['net/meisen/ui/gantt/GanttChart'], function (SvgLibrary) {\n    var gantt = new GanttChart();\n});\n```\n\n### Using js-gantt with `JavaScript Import`\n\nIf you simple want to use the library within your web-site, you can easily do so by downloading it, deploying it on your\nserver and adding `\u003cscript\u003e...\u003c/script\u003e` tags:\n\n```html\n\u003cscript src=\"/js/js-gantt.min.js\"\u003e\u003c/script\u003e\n```\n\nThe library is bound to the `window` instance and thus is directly available for any other script:\n\n```html\n\u003cdiv id=\"chart\" style=\"margin: 20px auto\"\u003e\u003c/div\u003e\n\n\u003cscript src=\"/js/js-gantt.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n    var chart =  new GanttChart();\n    var el = document.getElementById('chart');\n    chart.init(el, {\n        data: {\n            names: ['start', 'end', 'label'],\n            records: chart.createSampleData(n, 6),\n            mapper: {\n                startname: 'start',\n                endname: 'end',\n                tooltip: ['label']\n            },\n            timeaxis: {\n                end: chart.createSampleEnd(n),\n                granularity: 'mi'\n            }\n        }\n    });\n    chart.resize(500, 250);\n\u003c/script\u003e\n```\n\nIf you'd like to have this library available through a CDN, please **Star** the project.\n\n## Usage Examples\n\nHere are some [jsFiddle](https://jsfiddle.net/) examples utilizing the library. All examples are purely based\non this library, no additional dependencies needed.\n\n### A First Example: Showing some sample time intervals\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/pmeisen/js-gantt/master/resources/simple-example.png\" alt=\"Simple Example\" width=\"400\"\u003e\n\u003c/p\u003e\n\nhttps://jsfiddle.net/pmeisen/pfg7t1uw/\n\nThis example demonstrates how easy it is to use the library and config some different aspects like:\n\n- data:\n    - loading of data\n    - mapping\n    - time-axis\n- illustrator:\n    - scrollbars\n    - axis\n    - theme (interval size)\n\n### Rule-based Coloring: Example on how to utilize rule-based coloring for time intervals\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/pmeisen/js-gantt/master/resources/color-example.png\" alt=\"Coloring Example\" width=\"400\"\u003e\n\u003c/p\u003e\n\nhttps://jsfiddle.net/pmeisen/sL7dckbs/\n\nThe example shows how to use the `colorizer` to specify rule-based colors for the intervals. You simple have to override the default-configuration\nof the `colorizer`, which is done in the example (see [Configuration](#configuration) for further information):\n\n```javascript\nvar config = {\n    illustrator: {\n        config: {\n            view: {\n                coloring: {\n                    colorizer: function (interval, map, defaultColor) {\n                        var record = interval.get(IntervalView.gRawAttr);\n                        var value = map.val('label', record);\n                        var n = parseInt(value);\n\n                        if (n \u003e 0 \u0026\u0026 n \u003c= 25000) {\n                            return '#7E8F7C';\n                        } else if (n \u003e 25000 \u0026\u0026 n \u003c= 50000) {\n                            return '#3B3738';\n                        } else if (n \u003e 50000 \u0026\u0026 n \u003c= 90000) {\n                            return '#C63D0F';\n                        } else {\n                            return defaultColor;\n                        }\n                    }\n                }\n            }\n        }\n    }\n};\n```\n\n### External DataSource: Example on how to use an external data-source\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/pmeisen/js-gantt/master/resources/json-array-example.png\" alt=\"JSON Array Source Example\" width=\"400\"\u003e\n\u003c/p\u003e\n\nhttps://jsfiddle.net/pmeisen/r16qfrnx/\n\nMost often an external data source is used to visualize data. The library expects the data to be in JSON Array form, i.e.:\n \n ```json\n [\n   [\"Clara\",\"11.06.2014 00:15:32\",\"11.06.2014 00:39:32\",24,\"Tristan\",\"Maryland\",\"Tajikistan\",0.22,5.28,\"United States\",\"Asia\",\"Female\",\"Male\"  ],\n   [\"Niklas\",\"11.06.2014 00:15:35\",\"11.06.2014 01:48:35\",93,\"Jesko\",\"Florida\",\"Tuvalu\",1.84,171.12,\"United States\",\"Oceania\",\"Male\",\"Male\"  ],\n   [\"Niklas\",\"11.06.2014 00:17:25\",\"11.06.2014 00:37:25\",20,\"Anni\",\"Florida\",\"Cayman Islands\",0.24,4.8,\"United States\",\"Oceania\",\"Male\",\"Female\"  ],\n]\n ```\n\nThere are several good online tools to convert different formats into a JSON data form, e.g., for CSV [convertcsv.com](http://www.convertcsv.com/csv-to-json.htm).\nNevertheless, sometimes the data that you receive, e.g., from an url, is not in JSON form. To solve this problem, the library provides a configuration, which \nallows you to post-process `JSON` data, e.g., retrieved from a web-service. In the jsFiddle, the loaded data is `post-processed` via the following `function`:\n\n```javascript\nvar config = {\n    data: {\n        postProcessor: function (data) {\n            var f = 'dd.MM.yyyy HH:mm:ss';\n            for (var i = 0; i \u003c data.length; i++) {\n                var record = data[i];\n                record[1] = GanttChart.DateUtil.parseString(record[1], f);\n                record[2] = GanttChart.DateUtil.parseString(record[2], f);\n            }\n    \n            return {\n                names:['caller', 'start', 'end', \n                       'duration', 'recipient', 'origin', \n                       'destination', 'ratepermin', 'costs', \n                       'origincontinent', 'destinationcontinent',\n                       'callergender','recipientgender'], \n                records: data\n            };\n        }\n    }\n};\n```\n\nThe library needs an `object` defining the `names` and `records`, i.e., `{ names: [], records: [] }`. Thus, the `postProcessor` function must return such an object. The `names` are an array naming the different\nvalues of each record; it can be understood as the header of a CSV-file. The records contain the actual data, which have to ensure, that the values representing the start and end value of the interval, must be a `Date` type.\n\nIf the returned data is not a `JSON`, the library offers a `loader` configuration, which defines how to load data. The loader \nmust be implemented as:\n\n```\nvar config = {\n    data: {\n        loader: function (success, error) {\n            // success and error are both functions, with:\n            // - success: function(data);\n            // - error:   function(msg);\n        }\n    }\n};\n```\n\nFurther examples using different `post-processor` and `loader` definitions can be found:\n- mapping JSON objects (e.g., [sample-data.json](https://rawgit.com/pmeisen/js-gantt/master/resources/sample-data.json)) to the required data format: [jsFiddle: post-processing](https://jsfiddle.net/pmeisen/pj9thh4z/)\n- using a loader (e.g., loading CSV [sample-data.csv](https://rawgit.com/pmeisen/js-gantt/master/resources/sample-data.csv)) to the required data format: [jsFiddle: loader](https://jsfiddle.net/pmeisen/11z6o8pn/)\n\n## Configuration\n\nThe Gantt Chart library provides a rich set of configuration parameters. This paragraph tries to address the none trivial settings. \nTo get an easy start, it is recommend to look at the [Usage Examples](#usage-examples) and adapt the different configuration\nparameters as needed and described here.\n\nA full configuration (with the default settings) is as follows:\n\n```javascript\nvar config = {\n    data: {\n        url: null,\n        loader: null,\n        postProcessor: function (data) {\n            if (!$.isArray(data.names) || !$.isArray(data.records)) {\n                return null;\n            } else {\n                return data;\n            }\n        },\n        mapper: {\n            startname: 'start',\n            endname: 'end',\n            group: [],\n            label: [],\n            tooltip: []\n        },\n        names: [],\n        records: [],\n        timeaxis: {\n            start: null,\n            end: null,\n            granularity: 'days'\n        }\n    },\n    theme: {\n        loadingBackgroundColor: '#CCCCCC',\n        loadingBackgroundPosition: 'center center',\n        loadingBackgroundRepeat: 'no-repeat',\n        errorBackgroundColor: '#A30B1D'\n    },\n    illustrator: {\n        factory: function () {\n            // the default configuration is based on this usage\n            return new SvgIllustrator();\n        },\n        config: {\n            theme: {\n                fontFamily: '\"Lucida Grande\", \"Lucida Sans Unicode\", Arial, Helvetica, sans-serif',\n                fontSize: '12px'\n            },\n            general: {\n                margin: 2\n            },\n            view: {\n                showGrid: true,\n                showBorder: true,\n                showBackground: true,\n                showPositionMarker: true,\n                showIntervalMarker: true,\n                showPositionToolTip: true,\n                showIntervalToolTip: true,\n                coloring: {\n                    groupMapping: null,\n                    colorizer: function (interval, map, defaultColor) {\n                        // there is a default implemented, please have \n                        // a look at the source-code (IntervalView.js)\n                        // for further insights\n                    }\n                },\n                tooltip: null,\n                formatter: {\n                    tooltip: function (interval, map, textFormat, theme) {\n                        // there is a default implemented, please have \n                        // a look at the source-code (IntervalView.js)\n                        // for further insights\n                    }\n                },\n                theme: {\n                    backgroundColor: '#FFFFFF',\n                    laneHeight: null,\n                    intervalPosition: 'middle',\n                    intervalHeight: 20,\n                    intervalColor: '#7CB5EC',\n                    intervalBorderColor: '#99C9F7',\n                    intervalBorderSize: 1,\n                    gridColor: '#D8D8D8',\n                    gridSize: 1,\n                    positionMarkerColor: '#D8D8D8',\n                    positionMarkerSize: 1,\n                    intervalMarkerOpacity: '0.3',\n                    intervalMarkerWidth: null,\n                    borderColor: '#D8D8D8',\n                    borderSize: 1,\n                    tooltipMargin: 2,\n                    tooltipArrow: 6,\n                    tooltipRadius: 3,\n                    tooltipSize: 11,\n                    tooltipTextColor: '#000000',\n                    intervalMarginInPx: null\n                }\n            },\n            axis: {\n                tickInterval: null,\n                viewSize: null,\n                padding: 100,\n                formatter: function (value, type, level) {\n                    // there is a default formatter, please have \n                    // a look at the source-code (TimeAxis.js)\n                    // for further insights\n                },\n                theme: {\n                    tickColor: '#C0D0E0',\n                    tickWidth: 1,\n                    labelColor: '#606060',\n                    labelSize: 11\n                }\n            },\n            scrollbars: {\n                vertical: {\n                    theme: {\n                        arrowSize: 14,\n                        scrollareaColor: '#EEEEEE',\n                        markerColor: '#BFC8D1',\n                        buttonColorBorder: '#666666',\n                        arrowColor: '#666666',\n                        buttonColor: '#EBE7E8'\n                    },\n                    hideOnNoScroll: false,\n                    propagateScrollOnNoMove: false,\n                    step: null\n                },\n                horizontal: {\n                    theme: {\n                        arrowSize: 14,\n                        scrollareaColor: '#EEEEEE',\n                        markerColor: '#BFC8D1',\n                        buttonColorBorder: '#666666',\n                        arrowColor: '#666666',\n                        buttonColor: '#EBE7E8'\n                    },\n                    hideOnNoScroll: true,\n                    propagateScrollOnNoMove: false,\n                    step: null\n                }\n            }\n        }\n    },\n    position: 'center',\n    throwException: false\n};\n```\n\nMost of the configuration parameters should be self explaining (if not please contact me, so that I can enhance the documentation). Nevertheless, one of the \nmost important things to understand is the `data` section within the configuration. Which is explained in the following paragraph.\n\n### Configuration: Data Section\n\nIn general, the library tries to retrieve time interval data in the following order (it is not recommended to mix the different \nways and only utilize one of the ways to retrieve data):\n\n1. check if a loader is defined (data must be returned as `JSON`)\n2. check if an url is defined (data must be returned as `JSON`)\n3. check if `records` are set\n\nIf step 1. or 2. are used, the returned `JSON` is passed to the `post-processor`, if one is defined (`data.postProcessor` must be a `function`).\nThe `post-processor` must return an `JSON` fulfilling the following requirements:\n\n1. must be a plain-object (`JSON`)\n2. must have a named `records` attribute, which contains the time-interval data as arrays and each date as UTC-based `Date`, i.e., \n\n    ```javascript\n        [ \n           GanttChart.DateUtil.createUTC(1929, 10, 31, 0, 0, 0),\n           GanttChart.DateUtil.createUTC(2016, 6, 27, 0, 0, 0),\n           'actor',\n           'Bud Spencer',\n           'Carlo Pedersoli'\n        ]\n    ```\n3. must have a named `names` attribute, which returns an array of `names` for the different values in the `records` array, i.e.,\n\n    ```javascript\n        [ \n           'birthday',\n           'dayOfDeath',\n           'type',\n           'alias',\n           'name'\n        ]\n    ```\n\nSo all together, it must return:\n\n```javascript\n    loader: function(success, error) {\n        success({\n            names: [ \n                'birthday',\n                'dayOfDeath',\n                'type',\n                'alias',\n                'name'\n            ],\n            records: [\n                [ \n                   GanttChart.DateUtil.createUTC(1929, 10, 31),\n                   GanttChart.DateUtil.createUTC(2016, 6, 27),\n                   'actor',\n                   'Bud Spencer',\n                   'Carlo Pedersoli'\n                ],\n                [ \n                   GanttChart.DateUtil.createUTC(1939, 3, 29),\n                   null,\n                   'actor',\n                   'Terence Hill',\n                   'Mario Girotti'\n                ]\n            ]\n        })\n    };\n```\n\nThe next important setting within the `data` section of the configuration is the `mapper`. The mapper configuration is used to \ndefine, which values of each record have what semantic meaning, e.g., which value indicates the `startname` of the interval and which\none the `endname`. By default, the library assumes that the `startname` is `start` and the `endname` is `end`. Assuming the `names` \nfrom the previous paragraph, this default setting is incorrect and would need to be modified:\n\n```javascript\n    mapper: {\n        startname: 'birthday',\n        endname: 'dayOfDeath'\n    }\n```\n\nAdditional mappers can be defined for `groups`, `labels` and `tooltips`, i.e.,\n\n```javascript\n    mapper: {\n        startname: 'birthday',\n        endname: 'dayOfDeath',\n        group: ['type'],\n        label: ['alias'],\n        tooltip: ['name', 'alias']\n    }\n```\n\nThese values are used by the library to, e.g., offer group-based coloring, showing tool-tips on hover events or add a label\nto an interval.\n\n**Notes**: \n- the `GanttChart` provides some utility functions, which makes it easier to parse (e.g., `parseString`) or create (e.g., `createUTC`) UTC dates.\n- the `end` date can be `null`, which indicates that the interval has not ended yet (glued to the end of the chart).\n- an example using the data of this example can be found here: [jsFiddle](https://jsfiddle.net/pmeisen/boxtwojx/)\n\n## Advanced: Bower and RequireJs\n\nIf you utilize the library with `requireJs`, you may want to use the `sources` instead of the minified or combined version \ndistributed in the `dist`-folder. The library is developed using `requireJs` and ensures an easy usage with any \n`Asynchronous Module Definition` (see [AMD](https://github.com/amdjs/amdjs-api/wiki/AMD)).\n\nIf you have a look at the project's `gruntfile.js`, you will notice, that the libraries supporting `AMD` (e.g., `js-misc`, \n`js-svglibrary`) are also added to this project using their sources. The following lines in the `gruntfile.js` ensures that \nusage:\n\n```json\n{\n    \"bower\": {\n        \"dep\": {\n            \"options\": {\n                \"includeDev\": true,\n                \"checkExistence\": true,\n                \"paths\": \"bower-components\",\n                \"overrides\": {\n                    \"js-misc\": {\"ignore\": true},\n                    \"js-svglibrary\": {\"ignore\": true}\n                }\n            },\n            \"dest\": \"scripts\"\n        }\n    },\n    \n    \"copy\": {\n        \"dep\": {\n            \"files\": [\n                {\"expand\": true, \"flatten\": false, \"cwd\": \"bower-components/js-gantt/src\", \"src\": \"**/*\", \"dest\": \"scripts\"}\n            ]\n        }\n    }\n}\n```\n\n\n## Further Links\n\n- [Examples](examples/README.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpmeisen%2Fjs-gantt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpmeisen%2Fjs-gantt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpmeisen%2Fjs-gantt/lists"}