Angular NVD3 Multibar Chart with dual y-axis to showup only line using json data

Question

I am trying to create an angular multibarchart with only Lines excluding the bars. I would like to generate data using json instead of Lee Byron's test data generator. But I have no idea how to change the Lee Byron's test data to json data. I am new to angular and nvd3 as well. Please help me to find out a solution.

I want to get data from JSON file for the same

score 2 · Accepted Answer · answered Jul 31 '15 at 10:51

2

This is the data format you may need to generate in order to use with NVD3 chart.

[
    {
        "key": "Stream0",
        "values": [
            {
                "x": 0,
                "y": -0.14263036487474057
            },
            {
                "x": 1,
                "y": -0.1331488246687006
            }
        ],
        "type": "line",
        "yAxis": 1
    },
    {
        "key": "Stream1",
        "values": [
            {
                "x": 0,
                "y": -0.27248210886232416
            },
            {
                "x": 1,
                "y": -0.28823740073421067
            }
        ],
        "type": "bar",
        "yAxis": 2
    }
]

Refer this plunker for a working demo of how to use NVD3 multi chart.
Hope this helps.

If you want additional help on data generation, share what you have done so far. Will add on top of that.

answered Jul 31 '15 at 10:51

Aviro

2,125
22
28

Thanks for the solution. It worked but i find some difficulty in formatting the xaxis of the same. I want to show 1/07/2015,2/07/2015.......in x-axis. – Heerapreethi P Aug 03 '15 at 06:47
Did you try with this setting. `chart.xAxis.tickFormat(function(d) { return d3.time.format('%d/%m/%Y')(new Date(d)) });` – Aviro Aug 03 '15 at 06:52
yes I did. But it shows 01/01/1970 throughout my x-axis. – Heerapreethi P Aug 03 '15 at 06:57
I do see correct formatted date fields throughout x-axis in your plunker. What's the issue then? – Aviro Aug 03 '15 at 09:50
I had to use timestamp date values in x field.I fixed the issue. Thanks – Heerapreethi P Aug 04 '15 at 05:27
Hi, in this we are passing date(x axis in the long format). I am passing date format (dd-mm-yyyy) for x-axis from database.So how to do the conversion. – Heerapreethi P Sep 02 '15 at 07:11
1

You can use a Date library such as `XDate http://arshaw.com/xdate/` to do the required conversion. – Aviro Sep 02 '15 at 11:00

Angular NVD3 Multibar Chart with dual y-axis to showup only line using json data

1 Answers1