0

I want to take an object as two columns of a selected table. How can I extract a selected column and pass it as an object? I want the barData object to be the selected columns. This code creates a graph on the add-in taskpane on clicking a button which calls the function. Here is my code:

home.html

<svg id="visualisation" width="1000" height="500"></svg>

home.js

   function InitChart() {

        var barData = [{
            'x': 1,
            'y': 5
        }, {
            'x': 20,
            'y': 20
        }, {
            'x': 40,
            'y': 10
        }, {
            'x': 60,
            'y': 40
        }, {
            'x': 80,
            'y': 5
        }, {
            'x': 100,
            'y': 60
        }];

        var vis = d3.select('#visualisation'),
            WIDTH = 1000,
            HEIGHT = 500,
            MARGINS = {
                top: 20,
                right: 20,
                bottom: 20,
                left: 50
            },
            xRange = d3.scale.ordinal().rangeRoundBands([MARGINS.left, WIDTH - MARGINS.right], 0.1).domain(barData.map(function (d) {
                return d.x;
            })),


            yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0,
                d3.max(barData, function (d) {
                    return d.y;
                })
            ]),

            xAxis = d3.svg.axis()
                .scale(xRange)
                .tickSize(5)
                .tickSubdivide(true),

            yAxis = d3.svg.axis()
                .scale(yRange)
                .tickSize(5)
                .orient("left")
                .tickSubdivide(true);


        vis.append('svg:g')
            .attr('class', 'x axis')
            .attr('transform', 'translate(0,' + (HEIGHT - MARGINS.bottom) + ')')
            .call(xAxis);

        vis.append('svg:g')
            .attr('class', 'y axis')
            .attr('transform', 'translate(' + (MARGINS.left) + ',0)')
            .call(yAxis);

        vis.selectAll('rect')
            .data(barData)
            .enter()
            .append('rect')
            .attr('x', function (d) {
                return xRange(d.x);
            })
            .attr('y', function (d) {
                return yRange(d.y);
            })
            .attr('width', xRange.rangeBand())
            .attr('height', function (d) {
                return ((HEIGHT - MARGINS.bottom) - yRange(d.y));
            })
            .attr('fill', 'grey')
            .on('mouseover', function (d) {
                d3.select(this)
                    .attr('fill', 'blue');
            })
            .on('mouseout', function (d) {
                d3.select(this)
                    .attr('fill', 'grey');
            });

    }
6
  • I would like to confirm: Are you building a Web add-in or VSTO add-in? I am not a little bit confused by the title. Commented Jul 23, 2020 at 15:59
  • @RaymondLu my add-in is a Web Excel Add-in build using VSTO Commented Jul 24, 2020 at 17:40
  • VSTO doesn't support JS. It seems you are building a web add-in, right? Commented Jul 25, 2020 at 17:11
  • @EugeneAstafiev Yes I am building a Web Add-in and I would like to incorporate the above code into my add-in Commented Jul 27, 2020 at 9:52
  • See Work with ranges using the Excel JavaScript API Commented Jul 27, 2020 at 10:04

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.