[question]How to plot timeseries data using C3js

[bholagabbar]

@christabor I'm looking to plot something like http://c3js.org/samples/axes_x_tick_values.html which modifies the x axes value as well. Currently, for C3, I am only able to get the standard 1, 2, 3, 4 in the x axis and only able to pass y axis data

    @app.route('/graph-data')
    def linechart():
        return jsonify({
            "line1": [1, 4, 3, 10, 12, 14, 18, 10],
            "line2": [1, 2, 10, 20, 30, 6, 10, 12, 18, 2],
        })

[christabor]

You can use the example format, or click "override" and then pass in the full config that you would normally pass c3 (excluding any JavaScript, as it must be json serialize-able).

[bholagabbar]

@christabor I following this https://stackoverflow.com/a/32950521/4258892 and here is my configuration

@cross_origin()
@app.route('/c3ts')
def c3ts():

    data = dict(
        x='x',
        xFormat='%Y%m%d',
        columns=[
            ['x', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
            ['data1', 30, 200, 100, 400, 150, 2],
            ['data2', 130, 340, 200, 500, 250, 350]
        ]
    )

    return jsonify(dict(data=data))

This just doesn't seem to work. When I input the data endpoint for creating the chart, the preview is correct (because it is correct json) but the chart just keeps rendering with the circle...what exactly is the issue here?

[bholagabbar]

@christabor awaiting your reply!

[christabor]

I'll take a look today. Is the above example representative of your entire payload configuration?

[bholagabbar]

Yes pretty, much this is what I need. I need to plot something very similar and this exact configuration works when passed into C3js (ofcourse in proper JSON)

…

On Fri 16 Mar, 2018, 9:13 PM Chris Tabor, ***@***.***> wrote: I'll take a look today. Is the above example representative of your entire payload configuration? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#157 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ALJuGx5dOpW0wNQosCSyWSrScn8z7E1-ks5te92mgaJpZM4Sq7Fm> .

[christabor]

I used your example and was able to get it running with no problem. Here's my configuration:

{
    "username": "anonymous",
    "category": "uncategorized",
    "layout": "grid",
    "name": "asdsad",
    "modules": [
        {
            "name": "c3ts",
            "family": "C3",
            "refresh": false,
            "height": 600,
            "width": "col-8",
            "classes": [],
            "dataSource": "http://0.0.0.0:5004/c3ts",
            "override": true,
            "refreshInterval": null,
            "guid": "f8f78659-4d63-61e4-e2cc-ffa2640a950f",
            "type": "timeseries",
            "order": 0,
            "row": 1
        }
    ],
    "created_by": "anonymous",
    "date": "2018-03-16 23:13:21.005435",
    "id": "179a0357-29aa-11e8-ac1e-a0999b0aebbf"
}

[christabor]

Make sure to check "use custom configuration" in the config. See the screenshot.

[bholagabbar]

Okay, I'm a little lost. Here's what I do: 1. Create a dashboard, freeform 2. Edit dashboard, create widget, select C3 timeseries and and enter the url as data source. When you clicked on use custom configuration, it says it picks up data from 'config.Datasource', where is this file supposed to be in the project structure? Is this where you entered the configuration?

…

On Sat 17 Mar, 2018, 11:46 AM Chris Tabor, ***@***.***> wrote: Make sure to check "use custom configuration" in the config. See the screenshot. [image: screen shot 2018-03-16 at 11 15 51 pm] <https://user-images.githubusercontent.com/410839/37552325-0fd5e002-2970-11e8-8e13-ee8ef7778e26.png> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#157 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ALJuG5_s7AmGIygXelKRvFzTaLkjfEueks5tfKpHgaJpZM4Sq7Fm> .

[christabor]

Config.dataSource is the key used in your config that points to the url serving that data you referenced. Everything you chose should be the same, except the custom override option.

[bholagabbar]

@christabor Ah perfect, I was only missing checking the 'use custom config button'. Thanks a ton for your help. Cheers!

[christabor]

Good to hear!