Search code examples
javascriptangularjsd3.jsnvd3.jsangularjs-nvd3-directives

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


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


Solution

  • 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.