C3: Read Categories from data (like with x column with timeseries)

[dclairac]

Hi,

I want to create a group bar chart with String as x values.
The only way I found to do that was to use categorized x axis like on this: http://jsfiddle.net/Jq6Zg/1/

My chart have to be update with c3.load, pointing to a csv file.
This fork fine with timeseries (x axis values are in the same csv file than data) but I found no way to do the same with custom String or categories.

Is it possible ?
If not, is there a workaround to update data and categories/labels in same time from a unique data file ?

Thanks for your answer.

Dominique

[panubear]

Hi Dominique, Please try this code.

var chart = c3.generate({
    data: {
        x: 'x',
        url: '/myd3/ts.csv',
        type: 'bar',
        groups: [
            ['data1', 'data2']
        ]
    },
    axis : {
        x : {
            type : 'timeseries',
            tick : {
              format : "%y/%m/%d" 
            }
        }
    }
});

---

and CSV file will look like this

x,data1,data2
2013-01-01,30,130
2013-01-02,200,340
2013-01-03,100,200
2013-01-04,400,500
2013-01-05,150,250
2013-01-06,250,350

[dclairac]

I know that this work.
The problem in my case (as you can see in my exemple) is that my x values are not based on time but on "string). To be more explicit, imagine you have to create a bar chart with a list of url for axis time (www.google.com, www.amazon.com, ...) and for each of theses url, the download time and the loading time.

X label are not time based and not a simple count. it's String.

[panubear]

Oh, I see but I have no idea about this as well.

[masayuki0812]

Hi @dclairac,

Thank you for using this library, but now it is not possible to use string as x value and please let me confirm what you're trying.

First, I assume your chart would be like this (http://jsfiddle.net/ABT5k/4/) and is this correct? If so, you need to map url to number as this example, 'www.google.com' is mapped to 0 and 'www.amazon.com' is mapped to 1.

Second, it is possible to update categories/labels with data as shown in http://jsfiddle.net/ABT5k/4/ and is this what you want to do? If so, you can do it as this example although you need to reconstruct the data and labels for that update (pinpoint update is not supported..).

If my assumption is not correct, please let me know the more detail. I'd like to understand the situation. Thank you.

[dclairac]

Hi @masayuki0812

Thank you for your answer. Your have understand my need and your exemples are what I want to do. I have seen that it is possible to reload data with chart.load but as I already have to export my data to csv format like:
'www.google.com',30,130
'www.amazon.com',100,200
I was just thinking that it would be great to reuse it to update my charts.

I already do that with other chart (based on timeline) where time is given in the csv in same time that data:
2014-03-27 17:00:00,1000,30
2014-03-27 17:00:01,300,28
2014-03-27 17:00:02,2430,25
...

Has I just know you library since few day, I have just take a quick look on it so, based on your knowledge, do you think that it will be very complexe to implement ? based on you response, I may try to add this, but I don't want to take to much delay on my other project if you say it could be very complicated. In this second case, I will duplicate my export to reload data.

If you think it will not be so complicated, I'm open to any suggestion on the better way to implement it (better place, method to modify, ...)

Thanks
Best regards

[masayuki0812]

Thank you for the detail. I think I understand.

I think you can load the data with that format if I add a new param like excluded to c3.load(). By using this param as excluded: ['url'], the loading data will be like this:

download,loading
30,130
100,200

and this can be processed as usual csv data.
(I assume the original csv is like this:)

url,download,loading
www.google.com,30,130
www.amazon.com,100,200

In this case, row-0 is assumed as 'www.google.com' data and row-1 is assumed as 'www.amazon.com' data if no categories specified in c3.load() params. If specified, these rows will be assumed and shown as new categories.

How about this solution? If it would work, I'll add excluded params to c3.load().

BTW, I think it is not so difficult to support string x value when categorized axis. So I'll work on this too, but it needs more time than adding excluded.

[dclairac]

Hi @masayuki0812 ,
Thank you for your answer.

I'm not sure to well understand the excluded option, but I imagine that this will offer a way to ignore the 'url' column in csv. As is, chart can be created with a csv witch have more data than needed and 'url' column will be ignored.

If I'm right, this option could be a great feature for some cases (eg. CSV with 3 series but you only want to put 2 of theses in chart). But unfortunately, in my case, that means I still have to give categories of the graph in 'data' part.

As the number of tested url can grow each time I reload my CSV, this means I have to update categories on each c3.load call to be sure that I have the good category for good values.

Based on this, I think that the better solution is to be able to put String categories as x values in csv which enable the capacity to just reload the csv to update the entire chart (data and axes values).

do not hesitate to correct me if I am wrong in understanding your proposal.

Best regards

[masayuki0812]

Hi @dclairac ,
Thank you for your explanation.

I understand that you mean we can't know the categories in a csv until that csv loaded, so we can't specify the categories as categories as a param of c3.load(). If so, string x values should be accepted with data and used as categories as you said.

I'll fix to accept string x values, so please give me sometime.

Thank you!

[masayuki0812]

Hi @dclairac

I fixed to accept string x value when categorized axis. I think this would be work.
Could you try this on the latest version?

I added a ample for this and please check here - http://c3js.org/samples/data_stringx.html

[dclairac]

Thank you so much. It's exactly what I want.
I'll will add test it this week-end and close this tivket if all is good.

Many thanks.

[dclairac]

This work like a charm.
Many thanks

[masayuki0812]

Thank you :+1:

[mbonaci]

Thanks both of you, great work. This is exactly what I was looking for, like timeseries (with strings as dates), but of type bar.

[ghost]

This post makes c3/d3 viable for locally hosted (aka sensitive) business data for use in a dashboard, but often the date needs to be sorted chronologically from the past (left x-axis at the origin) to the present (furthermost right x-axis). Its critical that the time.csv data must be sorted under the x column (the dates) with the most recent FIRST in the csv as:

x,data1,data2
16-03-02,49.19,7.21666667
16-03-01,46.97,56.4166667
16-02-29,49.26,85.1333333

Also, very helpful for Americans to change the date parameter from :

format : "%y/%m/%d" to format : "%m/%d/%y"