Cylinder type chart

31 views
Skip to first unread message
birol aydemir

unread,
Oct 27, 2023, 11:10:36 AM10/27/23
to Google Visualization API
Why can't a cylinder type chart be created?
It is very simple to do with Excel.
It can't be done with chartjs and d3js.
It is not suitable with Three.
Sample :
<!DOCTYPE html>
<html>
<head>
    <title>Sample Gr</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <div id="chart"></div>

    <script>
        var data = [
            { category: 'Cat A', value1: 20, value2: 80 },
            { category: 'Cat B', value1: 40, value2: 60 },
            { category: 'Cat C', value1: 70, value2: 30 },
        ];

        
        data.forEach(function(d) {
            var total = d.value1 + d.value2;
            d.value1 = (d.value1 / total) * 100;
            d.value2 = (d.value2 / total) * 100;
        });

        var margin = { top: 20, right: 30, bottom: 50, left: 60 },
            width = 400 - margin.left - margin.right,
            height = 300 - margin.top - margin.bottom;

        var svg = d3.select('#chart')
            .append('svg')
            .attr('width', width + margin.left + margin.right)
            .attr('height', height + margin.top + margin.bottom)
            .append('g')
            .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

        var x = d3.scaleBand()
            .domain(data.map(function(d) { return d.category; }))
            .range([0, width])
            .padding(0.1);

        var y = d3.scaleLinear()
            .domain([0, 100]) 
            .nice()
            .range([height, 0]);

        var color = d3.scaleOrdinal()
            .domain(['value1', 'value2'])
            .range(['#3399FF', '#D1DAE3']);

        var stackedData = d3.stack()
            .keys(['value1', 'value2'])
            .order(d3.stackOrderNone)
            .offset(d3.stackOffsetNone)(data);

        svg.selectAll()
            .data(stackedData)
            .join('g')
            .attr('fill', function(d) { return color(d.key); })
            .selectAll('rect')
            .data(function(d) { return d; })
            .join('rect')
            .attr('x', function(d) { return x(d.data.category); })
            .attr('y', function(d) { return y(d[1]); })
            .attr('width', x.bandwidth())
            .attr('height', function(d) { return y(d[0]) - y(d[1]); })
            .attr('stroke', 'black')
            .attr('stroke-width', 3);

    
        svg.append('g')
            .attr('class', 'axis')
            .attr('transform', 'translate(0,' + height + ')')
            .call(d3.axisBottom(x));


        svg.append('g')
            .attr('class', 'axis')
            .call(d3.axisLeft(y).ticks(10).tickFormat(d3.format('.0f'))); 

        svg.selectAll('.bar-label')
            .data(data)
            .join('text')
            .attr('class', 'bar-label')
            .attr('x', function(d) { return x(d.category) + x.bandwidth() / 2; })
            .attr('y', function(d) { return y(d.value1 + d.value2) + 15; })
            .attr('text-anchor', 'middle')
            .text(function(d) { return d.value1.toFixed(1) + '%, '; });

        svg.append('text')
            .attr('x', width / 2)
            .attr('y', height + margin.top + 30)
            .attr('text-anchor', 'middle')
            .style('font-size', '16px')
            .text('Sample');
    </script>
</body>
</html>