c3.js

C3 stacked chart maintain data order

由 血红的双手。 提交于 2019-12-04 22:02:47
I'm following the instructions from the reference and from this answer , but am having no success. I've got a stacked bar chart, I want the data in the stack to appear in the order it is in in the data, but it's getting re-ordered and I can't figure out how to prevent it. Here's a jsfiddle . Here's the code var chartOptions = { element: 'chart', data: { "rows":[["0-1","2-3","4-5","6","7"],[25,56,14,2,1],[6,66,27,0,0],[0,70,30,0,0],[27,54,14,5,0],[0,54,30,8,8],[29,64,7,0,0]], "type":"bar", "groups":[["0-1","2-3","4-5","6","7"]], "order":null }, axis: { "x":{ "type":"category", "categories":[

Loading C3.js into an HTML file

由 江枫思渺然 提交于 2019-12-04 21:29:39
问题 I am having alot of trouble getting c3 to work in my web page. My code for the graphing is right, it just wont load anything and I am guessing this is due to me not having the right script src. Does anyone have a starter file for using c3, or the code I would need to load it in. Or is there a CDN I could reference? 回答1: Here is a quick starter file <!DOCTYPE html> <html lang="en"> <head> <title>C3</title> <meta charset="utf-8" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3

How can i change text of legend in c3 pie chart

由 拈花ヽ惹草 提交于 2019-12-04 19:06:26
问题 How can I change the Text of legend of pie chart. I am using c3 charts in my php page. I have already read the documentation of c3 charts but no luck. Currently i am using this code it show legend for true but I not able to change the text I have tried this. var chart = c3.generate({ bindto: '#container', padding: { top: 10, right: 0, bottom: 10, left: 0, }, data: { columns: [<?php echo $pieChartDataString; ?>], type : 'pie', labels: true }, legend: { show: true, position: 'upper-center'

C3 / D3 bar chart with horizontal scroll

由 穿精又带淫゛_ 提交于 2019-12-03 16:20:43
I'm working on creating a c3 bar chart where each bar represents the # of people who joined a program in the given week. Data is just an array of objects with [{week, # of people}, {week, # of people}, etc.] Ideally, I want the latest 6 weeks to show in the chart, but I want to be able to scroll horizontally to see past weeks. I saw one answer to this ( D3.js scrolling bar chart ), but in this case, the axis did not stay visible when scrolling - which I would like to do. Any help would be much appreciated. c3.js allows you to make a "Sub Chart", which in essence is similar to a stock chart

Loading C3.js into an HTML file

由 梦想的初衷 提交于 2019-12-03 13:32:06
I am having alot of trouble getting c3 to work in my web page. My code for the graphing is right, it just wont load anything and I am guessing this is due to me not having the right script src. Does anyone have a starter file for using c3, or the code I would need to load it in. Or is there a CDN I could reference? Here is a quick starter file <!DOCTYPE html> <html lang="en"> <head> <title>C3</title> <meta charset="utf-8" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"><

How can i change text of legend in c3 pie chart

由 穿精又带淫゛_ 提交于 2019-12-03 12:38:45
How can I change the Text of legend of pie chart. I am using c3 charts in my php page. I have already read the documentation of c3 charts but no luck. Currently i am using this code it show legend for true but I not able to change the text I have tried this. var chart = c3.generate({ bindto: '#container', padding: { top: 10, right: 0, bottom: 10, left: 0, }, data: { columns: [<?php echo $pieChartDataString; ?>], type : 'pie', labels: true }, legend: { show: true, position: 'upper-center' format: { title: function () { return "Legend title"; }, name : function () { return "Legend name"; },

How add C3 charts to angular 2+ project

由 两盒软妹~` 提交于 2019-12-03 11:39:46
问题 I searched a lot about Angular2 chart packages but there was no name of C3.js till I found an example of C3.js charts in link below ani-angular.strapui.com/dashboard/charts/c3-chart Then I searched for "C3 charts for angular" founded results was all about AngularJS projects. Even on their website was no guide to how to setup this package for angular I'm sure there is a way that you can add C3 chart to angular2+ project. Is there anyone that know how you do this? 回答1: There wasn't an answer on

C3JS bar chart with specific order

由 烈酒焚心 提交于 2019-12-03 11:35:27
If I have a C3JS grouped bar chart defined like the following, how can I get the segments to stay in the order I've defined them instead of in ascending order by value? By default C3 will order them as 5, 10, 40, but I want it to remain as 10, 40, 5. c3.generate({ bindto: '.active-loads', data: { columns: [ ['Picking up future', 10], ['Enroute', 40], ['Delivered', 5] ], type: 'bar', groups: [ ['Picking up future', 'Enroute', 'Delivered'] ], onclick: function(d) { console.debug(d); } }, axis: { rotated: true, x: { show: false } } }); EDIT Turns out it's as easy as specifying order: null in the

How add C3 charts to angular 2+ project

由 扶醉桌前 提交于 2019-12-03 02:08:47
I searched a lot about Angular2 chart packages but there was no name of C3.js till I found an example of C3.js charts in link below ani-angular.strapui.com/dashboard/charts/c3-chart Then I searched for "C3 charts for angular" founded results was all about AngularJS projects. Even on their website was no guide to how to setup this package for angular I'm sure there is a way that you can add C3 chart to angular2+ project. Is there anyone that know how you do this? Vala Khosravi There wasn't an answer on stackoverflow so I answer it by my self 1- run this command in your project root: npm install

custom attribute type directive to set the background color of c3 chart

由 馋奶兔 提交于 2019-12-02 20:26:28
问题 I am using Wasil C3 angularjs directives (http://wasil.org/angularjs-directive-for-c3-js-tutorial) and there is also a sample plunker through compilation (http://plnkr.co/edit/wiiUMk2KoHHrK4D1HdNu?p=preview). As need to set the back ground color of the sub chart, I am trying to create a custom attribute directive (subChartBgColor), so that on which ever chart I want to set back ground color of the sub chart I can simple put the attribute sub-chart-bg-color on Html tag, but some how it is not
订阅 c3.js