Solved: Using D3 for a gauge

remaster · ‎02-06-2019

Is there a way to put this D3 visual https://c3js.org/samples/chart_gauge.html or this one http://bl.ocks.org/msqr/3202712

into PowerBI? I've just inserted the JS Code inside de D3.JS Visual but it shows just a blank space...

Here is the code

var chart = c3.generate({
    data: {
        columns: [
            ['data', 91.4]
        ],
        type: 'gauge',
        onclick: function (d, i) { console.log("onclick", d, i); },
        onmouseover: function (d, i) { console.log("onmouseover", d, i); },
        onmouseout: function (d, i) { console.log("onmouseout", d, i); }
    },
    gauge: {
//        label: {
//            format: function(value, ratio) {
//                return value;
//            },
//            show: false // to turn off the min/max labels.
//        },
//    min: 0, // 0 is default, //can handle negative min e.g. vacuum / voltage / current flow / rate of change
//    max: 100, // 100 is default
//    units: ' %',
//    width: 39 // for adjusting arc thickness
    },
    color: {
        pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], // the three color levels for the percentage values.
        threshold: {
//            unit: 'value', // percentage is default
//            max: 200, // 100 is default
            values: [30, 60, 90, 100]
        }
    },
    size: {
        height: 180
    }
});

setTimeout(function () {
    chart.load({
        columns: [['data', 10]]
    });
}, 1000);

setTimeout(function () {
    chart.load({
        columns: [['data', 50]]
    });
}, 2000);

setTimeout(function () {
    chart.load({
        columns: [['data', 70]]
    });
}, 3000);

setTimeout(function () {
    chart.load({
        columns: [['data', 0]]
    });
}, 4000);

setTimeout(function () {
    chart.load({
        columns: [['data', 100]]
    });
}, 5000);

Any help is much appreciated!