c3.js

c3js - change the initial date label in x-axis

由 雨燕双飞 提交于 2019-12-24 11:49:14
问题 I have a c3js line graph of type timeseries. My axis tables are currently like this: 11/10.....05/11.....11/11.....05/12.....11/12.....05/13.....11/13 and it want it to be .12/10.....06/11.....12/11.....06/12.....12/12.....06/13..... where each dot indicates a month, note that the datapoint at 11/10 is still kept and displayed, only the axis labelling has changed. FYI, The increment is not set directly but hacked using culling . Is there any way to alter the starting label to 12/10 (with all

How to customise Gauge needle pointer using D3.js or C3.js?

由 天大地大妈咪最大 提交于 2019-12-24 02:17:43
问题 I need to plot a Gauge in my project. I am using d3.js to plot a gauge. I Followed this link It works good but i need to customise the needle point. I searched quite a lot but i could not fond any solution to customise the needle pointer. This is my result: Expected Result: How to achieve it using d3.js or c3.js.If anyone has idea share with me. Thanks in advance. 回答1: Based on the link you have provided you need to edit : Needle.prototype.render = function() { this.el.append('circle').attr(

Is there any way to change a label with c3js?

由 三世轮回 提交于 2019-12-23 10:21:08
问题 I am using the new c3js library. Is there any way to change a label for a piece of data in the chart? I have a bar chart where each bar is a dollar value. I want the labels for each bar to be $100 instead of 100. If I set the value to $100 then the library cannot make the chart. Is there any way to change the label -- if not the underlying value? 回答1: You can specify the formatting for both the Data Labels and the Axis Ticks. Have a look at the example below. <!doctype html> <html> <head>

Exporting c3.js chart as pdf

由 淺唱寂寞╮ 提交于 2019-12-23 04:52:54
问题 I am using c3.js library for building charts. And I was wondering if there is an easy solution to export charts drawn by c3.js in pdf format. I got a solution in angular js but I am looking for a jQuery based solution. 回答1: What you need is a SVG to PNG and a PNG to PDF converter. Here's a pure JS solution (works with jQuery) svg->png pdf exporter Include the two files above in your page. Then use these functions to do your thing: /** * @param {SVGElement} svg * @param {Function} callback *

C3 Graphs On Load Callback [closed]

由 ⅰ亾dé卋堺 提交于 2019-12-22 07:21:24
问题 Closed . This question needs details or clarity. It is not currently accepting answers. Want to improve this question? Add details and clarify the problem by editing this post. Closed last year . I want to use some kind of callback function that will run some code once the C3 Graph is finished loading so that I can change the fill colors of certain points. 回答1: Don't load any data in the initialization. Rather explicitly call the load event and pass the data in. Then you have access to the

Change % gauge chart to exact value in c3.js

由 ╄→гoц情女王★ 提交于 2019-12-21 18:31:45
问题 I am trying to change the units of a gauge chart. Instead of showing the % value by default, I would like to show the exact value. I looked for that in the documentation but it is incomplete and I am not sure which value I should put in the code to change it. var chart = c3.generate({ bindto: "#chart", data: { columns: [ ['data', 15.0] ], type: 'gauge', }, gauge: { min: 50, max: 100, units: '%' //I want to change that } }); 回答1: I am answering myself. To get the exact value and not the % one

Data aggregation in c3js

由 廉价感情. 提交于 2019-12-14 04:09:11
问题 Is there an option to aggregate the data in C3 charts? When the JSON contains multiple data elements with the same category, data is plotted as multiple points in the charts, where as it should be aggregated and shown as a single point in the chart. Attached are the C3 charts and expected chart format. In the example: "name 1" show a single point at 300 as upload, where as ion C3 it show one point at 200 and the other at 100 for the same. Code Used: var chart = c3.generate({ bindto:'#png

generate point-to-point animation in c3.js

由 依然范特西╮ 提交于 2019-12-14 03:26:13
问题 How can I generate an animation when a new point is added (without restarting all the points in the chart). when a new point is added, the change is somewhat abrupt. the idea is to generate an animation when you add new or new points. for example: https://jsfiddle.net/ej0wLtv6/ this is my code: https://jsfiddle.net/pL4mL2sr/ setTimeout(load, 1000); function load(){ chart.load({ xs: { data1: 'data1_x' }, columns: [ data1_x, data1 ] }); } 回答1: You want to apply a duration to the transition: By

My chart lines are not in order

由 匆匆过客 提交于 2019-12-14 03:07:48
问题 I have a graph and the result of joining all the lines should be as in the image. but currently they are not. what am I doing wrong? https://jsfiddle.net/r2uaq27a/ var chart = c3.generate({ data: { xs: { data1: "data2" }, columns: [ ['data1', 2,3,4,7,8,9,8,7,3], ['data2', 1,2,3,4,5,4,3,2,1] ] } }); 回答1: Set the some what undocumented xSort property of data to false : var chart = c3.generate({ data: { xSort: false, x: 'x', order: function (i) { console.log(i); }, columns: [ ['x', 1,2,3,4,5,4,3

area chart fill-opacity issue in c3js and angular 2

由 喜欢而已 提交于 2019-12-13 23:12:55
问题 I have created a line chart using c3.js and angular 2.But i am getting a unwanted black area in line chart.It's working more likely chart with filled area.I am trying to override it's css property..."fill-opacity". but it's not working.Give me a solution.enter image description here 回答1: Due to c3 lib CSS is missing. CSS file for C3 chart . https://rawgit.com/masayuki0812/c3/master/c3.css. 回答2: copy past css into your bar-chart.component.css and add encapsulation in decorator as shown in e.g.
订阅 c3.js