FAQ Database Discussion Community


Creating c3 graphs with dynamic values

php,jquery,mysql,c3
Below is the code i'm using to generate a line graph using c3.js . In the variable 'value' I'll get the values to be plotted as comma separated values. I've hard coded the values now. With this code, the graph generated has only one value - '0'. This code doesn't...

LineChart with C3 using JSON

json,c3
I can't understand because my chart is not working properly. Anything is displayed. Below my simple code: <div id="chartc3"></div> <script> var scene; $.getJSON('assets/json/chartc3.json', function(data) { scene=data; var chart = c3.generate({ bindto: '#chartc3', data: { json: scene, keys: { value: ['round','val'], } } }); }); </script> and the following json file:...

Change Y axis labels in C3 charts

jquery,c3
Is it possible to change or categorize the Y axis labels in C3 line chart. Is it possible to categorize and display the Y axis labels as "Beginner","Intermediate", "Advanced" and "Mastery" where the values would be ranging between 0-25, 25-50, 50-75, 75-100 respectively?...

c3.js how to get a onclick event for DataGroups

javascript,jquery,angularjs,d3.js,c3
I have been using c3.js and cant figure out how to get a JavaScript event for onClick of the Data group labels which is displayed in X Axis. Basically i need event to which I can register a event handler in the below Circled area. ...

Setting the graph name in C3.js

javascript,d3.js,c3.js,c3
I have a graph that in which I load new data, using the following function: function insertGraph(yAxis, xAxis, Header) { setTimeout(function () { chart.load ({ bindto: "#graph", xs: { 'y':'x' }, columns: [ yAxis, xAxis ] }); }, 100); } An Example of values for yAxis, xAxis, and Header that...

Updating C3 charts on props change with React

reactjs,c3
I am trying to beautify the update of a C3 chart written as a React component when its data change. The data flows to the component from a parent component via its props. The solutions I have now "works" but do not seem optimal: when new data comes in, the...

How to remove cursor pointer from d3 Pie chart

d3.js,pie-chart,c3
Is there an option that disables the "cursor: pointer" style from the c3|d3 pie chart? I simply display slices and on hover just show the % percentage and a label, do not need the pointer because it is misunderstood as a link to somewhere, yet it is the default cursor......

How to create stacked bar chart using C3 for string data?

bar-chart,c3
I am trying to created stacked bar chart using C3 chart. But i am facing problem as i am trying to plot a graph with string values. My data looks like this var data1=["Country", "Denmark", "India"] var data2=["Value", 1, 1] var X=["Item",'Item1','Item2] c3.generate({ data: { x:'Item', columns:[[data1],[data2]], type: 'bar' ,...

How to display the message in the popup?

jquery,razor,model-view-controller,c3
i have a popup that was designed in a html page. i need to show the message "This batch contains " + TargetCount+ " records. Please press Continue to finish importing your data.", near the buttons outside the border,where the "TargetCount" returns from controller. I have my controller like, [HttpPost]...

How to fit Y axis in c3

javascript,angularjs,c3
I want to use rotated axis and I want to fit Y axis. How can I do this? I tried : c3.generate({ data: { x: 'x', columns: [ ['x', '2013-10-31', '2013-12-31', '2014-01-31', '2014-02-28'], ['sample', 30, 100, 400, 150], ] }, axis : { rotated: true, x : { type :...

c3 graph in a dark background; how to change axis and tick value color

javascript,jquery,d3.js,c3
I have plotted a graph on a dark background but due to the axis-color and tick-value color it is very difficult to read. How do I change to color of the axis, ticks and axis tick value to white?

c3js line chart all data unselected how to show tick values

javascript,d3.js,data-visualization,c3
I have a simple c3js line chart w/3 different lines. When I "unselect" all 3 data sources, the x-axis tick values disappear. I was wondering if there was anyway to reverse this behavior? I'd like to show the x-axis tick values even when there is no data present. The xaxis...

C3 js line chart getting error for date

javascript,charts,c3
I am trying to use c3.js timeseries line chart (URL : http://c3js.org/samples/timeseries.html). The only difference being that I am using the CDN link to the js files instead of downloading them. However I keep getting the following error Chrome Uncaught Error: x is not defined for id = "date". Firefox...

How to show values in C3.js in Donut Legend?

javascript,d3.js,charts,c3
here goes a simple example screenshot where you can see a donut chart. Is it possible to show the real values (not the %-calculated ones) in the legend of the chart like marked with red arrows in the screenshot? Everybody want's to know "22.7 percent of WHAT" when watching the...

how to style style line chart points in c3js

javascript,d3.js,charts,linechart,c3
I have a general c3js question. I'm trying to make the points in a C3JS line chart "hollow" (white fill, with a colored stroke), but am having a hard time figuring out how to do that. I've tried to add my own CSS, but it gets overwritten by the direct...

How to Create Dojo Widget using C3

javascript,dojo,widget,c3
I couldn't find any example describing the creation of Dojo Widget using C3 library. Before trying to create a widget, I tried to create a module, and it worked. I am new with Dojo ... so here is what I tried to create a Widget with c3 : require([ "dojo/_base/declare",...

Position an inset legend at the top-center

javascript,dom,d3.js,c3
According to the C3 documentation, legend.inset.postition only supports top-left, top-right, bottom-left and bottom-right positions. I would like to have my legend positioned at the top-center. Here is the JS that creates the plot: var chart = c3.generate({ data: { columns: [ ['data1', 100, 200, 50, 300, 200, 50, 250, 100,...

c3 JS scroll bar jumping when loading new data

javascript,css,angularjs,d3.js,c3
We are using c3 as a wrapper around d3 javascript charting library. You can see even in their own demo when the data is updated the scroll bar flickers momentarily. This isn't a problem when there is already a scrollbar on the page as it is in their case. But...

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

angularjs,charts,angularjs-directive,c3.js,c3
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...

C3js, Papaparse, Parse CSV to C3js

csv,c3,papaparse
I've been trying to parse a CSV file with Papaparse4 to use it on charts created with C3js, but I can't get it to work. I want to be able to load different CSV files, so I'm using a file input, the file gets parsed (I can see it on...

C3 Charts: Hiding Keys on Bar Graphs

javascript,charts,c3
I've looked through all of the documentation and can't find a way to hide the keys for a bar graph. Basically, I'd like to remove the 'total' and color at the bottom. Has anyone found a way to do this? ...

Defining a category axis using c3.js

javascript,d3.js,c3
I just started using c3.js and I haven`t figure out how to specify the values of ticks in x axis. The values are type1, type2, type3... and here is my code: $(document).ready(function(){ var mammoReconstructionsAcceptedChart = c3.generate({ bindto: '#mammo_reconstructions_accepted', data: { x: 'x', columns: [ ['x', 'type1', 'type2', 'type3', 'type4', 'type5',...

radio button in conjunction with c3 does not show text

html,d3.js,c3
I am creating a custom legend, that contains radio inputs, of a pie chart created with c3. I create radio inputs via D3 API. I haven't been able to show the text on the side of radio input. d3.select('.container').insert('div', '.chart') .selectAll('input') .data(['data', 'data10', 'data5']) .enter().append('input') .attr('type', function (id) { return...

How to increase size of pie segment on hover in d3

javascript,d3.js,pie-chart,c3
I created pie chart using d3. How to increase size of pie segment on hover? As you can see, green segment is so small so I want to change it size like red segment. How can I do this? My code: var w = 400; var h = 400; var...