naver / billboard.js Goto Github PK

Description

Test coverage remains at 73%, it should be cover at least 80%+.
It needs add more test cases to increase.

Description

Some data options aren't described on API doc

• data.url
• data.json
• data.rows
• data.columns
• data.mimeType
• data.keys

After updating Chrome to v 59.0.3071.115 tooltips and hovering-highlight stopped working on charts.
It is even worse that it does not work for me also on the examples page of billboard.js (ie top bar chart here https://naver.github.io/billboard.js/)

Does anyone have any solution for that?

Edit: Important to mention that it works correctly in Firfox and even in Edge.
Edit2: What is interesting, when touching chart chunks on the touch screen of the very same computer it works correctly.

Description

Implement new method to export as an image.

// interface
chart.export(MIMEType);

// ex. Export chart as png image
chart.export("image/png");

Hello,

Description

I am trying to add a padding on a chart that use a timeseries based x axis. But nothing happens. What I'm trying to achieve is to prevent my points to be cut on left and right when they are on the edges of my chart (see below).

Steps to check or reproduce

You can see this codepen to reproduce.

Thank you very much.

EDIT : I found a workaround by using min/max and substracting/adding some days on my boundaries. It works, but I think it would be better if we could use padding since it is made for that purpose I guess.

Description

• Add CDN info
• Change demo URL
• Add npm package badge

Description

setup CI server on push (TravisCI)

Description

Like I mentioned on the title, X-axis of timeseries-based-chart changes by the chart type
and I’d like to get timeseries charts w/ same x-axis .

On the bar chart example(check the bar chart below), there are some scratch areas on the very left and right side, which were generated automatically.
The thing is… on the line chart example, the scratch area doesn’t exit and the x-axis is differ from that of bar chart. (Even though they were rendered based on the totally same data)

I am getting through this problem by manipulating some padding.left & padding.right (or axis.x.padding.left, axis.x.padding.right).

As you may guess, sometimes, synchronizing each chart's x-axis is a huge deal.

It will be a big help for me, if you guys are willing to provide an way to get charts w/ same x-axis.
There must be someone who needs your solution on this matter as like I do.

Thanks, in advance. :)

Steps to check or reproduce

JS Bin on jsbin.com

Have you had success with using this library in a React project?

Description

AFAIK, the labels are rendered on the upper-side of the chart by default.
There's no option to manipulate the position of labels, so far.

The easiest way (but bothering ;() is increasing the 'y' value of element manually.
However, changing the 'y' value by hand may cause a blink.
Because, this re-rendering follows the default rendering on the default position.

I'd like to place the label on the bottom by handling the option which could be a solution to the above problem at the same time.

If you guys have a possible way, please add it to the following release.

I believe that there must be other users who seriously need it.

Thanks ~ :)

Steps to check or reproduce

        var chart = bb.generate({
            bindto: "#_temperature",
            interaction: {
                enabled: false
            },
            legend: {
                show: false
            },
            data: {
                x: "x",
                columns: [
                    ['x', 1, 2, 3, 4, 5],
                    ['data1', 7, 9, 13, 16, 20],
                    ['data2', 2, 2, 5, 7, 10]
                ],
                labels: true
            },
            axis: {
                x: {
                    show: false
                },
                y: {
                    show: false
                }
            },
            tooltip: {
                show: false
            },
            point:   {
                show: false
            }
        });

Description

Stacked charts have gaps in them when there's null values, line.connectNull prevents gaps in line charts.
However connectNull works poorly with stacked charts, with the stacks overlaying each other completely.

Steps to check or reproduce

When connectNull is true:
https://jsfiddle.net/jL196Lnv/1/
Stacks overlay each other completely

When connectNull is false:
https://jsfiddle.net/7x42jqtr/1/
Gaps in filled in area

Hi!
How could I show/hide each label in a donut chart when the user do a mouse over or mouse out in each legend:

var chart = bb.generate({
  data: {
    columns: [...],
    type: 'donut'
  },
  legend: {
    item: {
      onover: function(id) {
        // code ¿?
      },
      onout: function(id) {
        // code ¿?
      }
    }
  },
  donut: {
    title: 'Title',
    label: {
      show: false
    }
  },
  bindto: '#donutChartContainer'
});

Thanks!

Description

Generate changelog file according commit logs

Steps to check or reproduce

1. zoom in or zoom out
2. resize window
3. zoom isn't applied to the size of window.

Description

Currently data label value are shown above the data point.
In most cases is okay, but there're needs to change the label's position.

For example, in the case of #21

Description

Show test coverage in the readme

Description

I want to create bar chart but, billboard draw line chart.
master branch version is broken.
but, packaged version is ok.

Steps to check or reproduce

 var chart = bb.generate({
  "data": {
    "columns": [
      [
        "data1",
        30,
        200,
        100,
        400,
        150,
        250
      ],
      [
        "data2",
        130,
        100,
        140,
        200,
        150,
        50
      ]
    ],
    "type": "bar"
  },
  "bar": {
    "width": {
      "ratio": 0.5
    }
  },
  "bindto": "#chart"
});

Description

Add "donut.label.ratio" option description to API.

Steps to check or reproduce

• code
  https://github.com/naver/billboard.js/blob/master/src/config/Options.js#L2058-L2093
  https://github.com/naver/billboard.js/blob/master/src/internals/arc.js#L150-L153

• doc
  https://naver.github.io/billboard.js/release/latest/doc/Options.html#.donut

Description

I’m trying to render a chart w/o y and x axis.

The chart supposed to be rendered on the very lower side without any space, as I expected.

But the axis still does exist, even after adding the ‘axis.x.show = false’ & ‘axis.y.show = false’.

The axis’s visibility is set hidden, meaning still occupying the space.

So the solution what I am having is like below.

1. Draw the chart bigger than I meant to
2. Cut off the x and y axis on purpose

When I render a chart w/o the axis, I repeatedly do this and feel knackered.

I am hoping you to have a plan regarding the bothering works I mentioned above.

Thanks :)

Steps to check or reproduce

var oRes = {
    date: [
        '2016-10-15',
        '2016-11-01',
        '2016-12-01',
        '2017-01-01',
        '2017-02-01',
        '2017-03-01',
        '2017-04-01',
        '2017-05-01',
        '2017-06-01',
        '2017-07-01',
        '2017-08-01',
        '2017-09-01',
        '2017-10-01',
    ],
    data: [null, 42, 47, 37, 44, 40,
        33, 35, 32, 41, 46,
        50, 51]
};
this._aDate = (["date"]).concat(oRes.date);
this._aData = (["precipitation"]).concat(oRes.data);

var chart = Billboard.generate({
    bindto: "#_precipitation",
    interaction: {
        enabled: false
    },
    legend: {
        show: false
    },
    tooltip: {
        show: false
    },
    data: {
        x: "date",
        types:    {
            precipitation : "bar"
        },
        columns: [ this._aDate, this._aData],
        labels: true
    },
    padding: {
        right:  -10
    },
    bar: {
        width: 5,
        zerobased: true
    },
    point: {
        show: false
    },
    axis: {
        x: {
            // fit:  true,
            min:  "2016-10-15",
            max:  "2017-10-14",
            type: "timeseries",
            tick: {
                format: "%-m"
                /*culling: {
                    max: 12 // the number of tick texts will be adjusted to less than this value
                }*/
            },
            show: false,
            padding: {
                left: 0
            }
        },
        y: {
            show: false,
            padding: {
                bottom: 0
            }
        }
    },
    grid:    {
        x: {
            lines: [
                {value: "2016-11-01"},
                {value: "2016-12-01"},
                {value: "2017-01-01"},
                {value: "2017-02-01"},
                {value: "2017-03-01"},
                {value: "2017-04-01"},
                {value: "2017-05-01"},
                {value: "2017-06-01"},
                {value: "2017-07-01"},
                {value: "2017-08-01"},
                {value: "2017-09-01"},
                {value: "2017-10-01"},
                {value: "2017-06-19", class:"c3-dashed-line"}
            ]
        }
    }
});

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Once you have installed CI on this repository, you’ll need to re-trigger Greenkeeper’s initial Pull Request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organiszation’s settings page, under Installed GitHub Apps.

Description

Add support of CDN for dist files.

The targets are:

• https://cdnjs.com/
• https://www.jsdelivr.com

Hi,
Thanks, this is a great charting library ! I've encountered some trouble to change step type for step chart as described here : https://naver.github.io/billboard.js/release/latest/doc/Options.html#.line.

Description

How to use option line.step_type for step charts ?

The code below produce no chart, only an error in the console.
It works only for type = 'step'.

Steps to check or reproduce

bb.generate({
  "data": {
    "columns": [
      [
        "data1",
        300,
        350,
        300,
        0,
        0,
        100
      ]
    ],
    "type": "step"
  },
  line: {
     step: {
         type: "step-after"
     }
 },
  "bindto": "#chart"
});

Description

There're options to handle the visibility of specific element using xxx.show options.

• ex. axis.y.show, point.show, etc.

Even they aren't rendered, still nodes are created, which are unnecessary in most cases.
Look possibility to not generate those nodes if aren't shown, which can be more efficient.

Description

Implement new option for data, which callback function are executed for the min/max data value.
The callback function should be executed only once during generation.

The interface is :

// data.onmin / data.onmax
var chart = bb.generate({
	bindto: "#chart",
	data: {
		...
		onmin: function(data) {
			// the minimal data point element reference is given in array
			data === [
				{ element: HTMLElement, index: Number, value: Number },
				...
			]
		},
		onmax: function(data) {
			// the maximal data point element reference is given in array
			data === [
				{ element: HTMLElement, index: Number, value: Number },
				...
			]
		}
});

I know it's only early days, but is there any intent to ship a candlestick chart? Seems to be a popular request across many charting libraries.

Google Charts for reference:
https://developers.google.com/chart/interactive/docs/gallery/candlestickchart

Description

webpack 3.0 supports single scope hoisting.
if we apply it, we get the low file size and fast loading speed.

Description

onmouseXXX options are obsolete and it needs to be changed to the new renamed options.

• https://github.com/naver/billboard.js/blob/master/demo/demo.js#L328

Description

The chart area applied clip-path attribute, to not overflow chart element, but in some cases the chart element should be displaying over the axis.

For example,

• the first image illustrate when data 0 is visualized over the axis x, but the data point is hidden, because of clip-path.
• in that case, the second image is more appropriate. Showing the entire data point circle above axis.
  

The new option axis.clippath will give the opportunity to handle this occasion.

Description

 @property {Boolean} [line.step_type=step] Change step type for step chart.

• https://github.com/naver/billboard.js/blob/master/src/config/Options.js#L1928

line.step.type option is maldescribed as line.step_type.
It should be line.step.type

Description

bars do not resize when zooming.

example

`

<div id="chart1"></div>

<!-- Load D3.js -->
<script src="https://d3js.org/d3.v4.min.js"></script>

<!-- Load billboard.js with style -->
<script src="billboard.js"></script>
<link rel="stylesheet" href="billboard.css">

<script>
    var chart = bb.generate({
        "data": {
            "columns": [
                [
                    "data1",
                    30,
                    200,
                    100,
                    400,
                    150,
                    250
                ],
                [
                    "data2",
                    130,
                    100,
                    140,
                    200,
                    150,
                    50
                ]
            ],
            "type": "bar"
        },
        "zoom": {
            "enabled": true
        },
        "bar": {
            "width": {
                "ratio": 0.5
            }
        },
        "bindto": "#chart1"
    });
</script>

Description

If there is a chart in swipe area, swipe will not work.

Steps to check or reproduce

• https://github.com/naver/billboard.js/blob/master/src/interactions/interaction.js#L109-L113

Description

While trying the 'getting started' example on the homepage for this library, I keep getting the following error: 'Uncaught TypeError: Cannot read property 'scaleOrdinal' of undefined' and the line it complains about in the un-minified version is line 5279, in the ChartInternal.generateColor function. I am using the billboard.js and billboard.css linked on the homepage, which are placed at the root of the same directory where I have my HTML file. I see this in Chrome and Firefox on Windows 7.

Steps to check or reproduce

My billboardTest.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Billboard.js Test</title>
        <script defer src="https://d3js.org/d3.v4.min.js"></script>
        <script src="billboard.js"></script>
        <link rel="stylesheet" href="billboard.css">
    </head>

    <body>
        <div id="chart"></div>

        <script>
            var chart = bb.generate({
                bindto: '#chart',
                data: {
                    type: 'bar',
                    columns: [
                        ["data1", 30, 200, 100, 400, 150, 250],
                        ["data2", 130, 100, 140, 200, 150, 50]
                    ]
                }
            });

        </script>
    </body>
</html>

Description

The default tooltip data class name is setting with double dashes as:
bb-tooltip-name--data1

It should remove unnecessary dash on class name to be
bb-tooltip-name-data1

Description

Currently linting should be executed separately which can be omitted easily.
Need to be added on CI build to make sure the check.

Description

support git hook

• case commit : check commit style
• case push : check lint

Description

Update dev-env to use npm v5.

• http://blog.npmjs.org/post/161081169345/v500

Description

Hi guys, I'm using the pie chart and I'm trying to change the order of the pie section using the property data.order, but it doesn't work. Whatever option I use I get the same result ('asc' | 'desc' | custom compare function).

this is the code example I'm using:

bb.generate({
    bindto: "#chart",
    data: {
        columns: [
            ["data1", 30, 200, 100, 170, 150, 250],
            ["data2", 130, 100, 140, 35, 110, 50]
        ],
        type: "pie",
        order : "asc",
        colors: {
          data1: "red",
          data2: "green"
        }
    }
});

Steps to check or reproduce

Here are some examples with using different sort parameters and getting always the same result:
using sort asc
https://codepen.io/anon/pen/zzzBRO

using sort desc
https://codepen.io/anon/pen/BZZPVY

using custom compare fn
https://codepen.io/anon/pen/rwwrrE

Let me know if I'm doing something wrong or if there is a workaround for this.

thanks!

Hello,

Description

I put an onclick callback on my chart. It works pretty well when clicking with a mouse on a desktop device. But when touching a point on a touch screen or in chrome and firefox in touch device simulation mode, it doesn't execute my callback.

Steps to check or reproduce

Here is a codepen on which you can easily reproduce this, by clicking on a point.

Thanks for you work.

Description

Currently, donut title text can display one line text only.

Provide multiple lines rendering option, when title text contain new line(\n) character.
ex.)

  donut: {
    title: "Iris Petal\nWidth"
  },

Description

PhantomJS no longer will be maintained due to the chrome headless.
To get the advantage of the chrome update and to align the environment of test, switch is needed.

• https://developers.google.com/web/updates/2017/06/headless-karma-mocha-chai

Description

The ticks remain locked to the data points, rather than nicely spreading out to the full range.
I have an application that needs to show the same timeseries range and often there will be gaps in the data shown.
I'd like if Billboard could know to spread the ticks out nicely when the range of the chart exceeds the range of the data.

Steps to check or reproduce

https://jsfiddle.net/sc1sn35u/
https://jsfiddle.net/tz646yhu/1/

Description

New initialization options callbacks:

• onbeforeinit
• onafterinit

Description

To make a custom legend is already provided.

• https://naver.github.io/billboard.js/demo/#Legend.CustomLegend

But, to make is quite tedious. Bringing a easy option will be facilitating those works.

Description

Radar chart type is quite commonly used.
Intent to implement the support of the new type radar.

Description

Hello there, coming from a D3 background I used to write code like this:
const opacity = d3.scaleLinear().domain([0, max]).range(["#efffff", this.computedType]);

(this.computedType was simply a different color based on the type of the graph.)
to obtain the effect of changing the color based on the single bar value: the higher the value, the stronger the color.

How can I obtain the same effect on Billboard? I saw in the doc that there is a color:pattern property but it's not really clear how it works!

Steps to check or reproduce

Description

I have a bar graph (the same as the example provided here: https://cdn.rawgit.com/naver/billboard.js/8413325d/demo/#Axis.RotatedAxis,
but with just the bar type of data. The only difference is that the data provided are in json format with a text value:
[ {text: "text1", value: 5}, {text: "text2", value: 10}, {text: "text3", value: 15}, ]

I would like to have the text value of every object as text label of the corresponding value. So I added this code to the graph:

axis: { x: { type: "category", categories: labels, }, rotated: true, },

but the label are not aligned with the values. In that specific case I can see the three bars with the value of 5, 10 and 15 but the labels on the y axis (the x rotated) are just two.

In that case I should see a third "test1" aligned with the bar in the middle. On top of that you can notice that the label that are present are not aligned correctly with the respective bars.

Steps to check or reproduce

This is the code that cause the problem:

            const data = this.data.map(i => i.value);
            const labels = this.data.map(i => i.text);
            data.unshift("data1");
            billboard.bb.generate({
                data: {
                    columns: [
                        data,
                    ],
                    types: {
                        data1: "bar",
                    },
                },
                axis: {
                    x: {
                        type: "category",
                        categories: labels,
                    },
                    rotated: true,
                },
                bindto: `.${this.graphUniqueClass}`,

Description

Github has support of reviewer assign by their Web UI.
Remove unnecessary Preferred reviewers clause from the PR template.

Description

• update latest lib.

Description

Greetings
I didn't find the way to unbind all hover effects from donut
May You give me advice how to do it?
Thank you

Steps to check or reproduce

Description

Event rect elements remains at same position, even chart area are zoomed.
When try to do some interaction after zooming, it gets wrong positioned due to <rect> element position.

Expected action

The <rect> element should positioned aligned with the data element