Custom Counter Visualization in Redash

[viettran97118]

We use GitHub only for bug reports 🐛

Anything else should be a discussion: https://github.com/getredash/redash/discussions/ 👫

🚨For support, help & questions use https://github.com/getredash/redash/discussions/categories/q-a 💡For feature requests & ideas use https://github.com/getredash/redash/discussions/categories/ideas

Alternatively, check out these resources below. Thanks! 😁.

• Discussions
• Knowledge Base

I see a issue #4640, it like my issue. I want custom counter, and show KPI.

So i can add some thing like that:

[guidopetri]

@viettran97118 if you'd like, we can re-open that old PR. You'd have to resolve merge conflicts and to merge master into the branch.

[viettran97118]

@guidopetri , yes, i really need it. can you re-open and merge this PR?

An alternative way to do this, it is use annotation in line chart. But it's not good ideas.

// Type console.log(x, ys); for more info about x and ys
// To plot your graph call Plotly.plot(element, ...)
// Plotly examples and docs: https://plot.ly/javascript/

var xData = [
  [2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2013]
];

var yData = [
  [74, 82, 80, 74, 73, 72, 74, 70, 70, 66, 66, 69],
];

var colors = ['rgba(67,67,67,1)', 'rgba((255,255,255,1)', 'rgba(49,130,189, 1)',
  'rgba(189,189,189,1)'
];

var data = []; //create empty data

for ( var i = 0 ; i < xData.length ; i++ ) {
  var result = {
    x: xData[i],
    y: yData[i],
    type: 'scatter',
    mode: 'lines',
    line: {
      color: 'rgba((255,255,255,1)', //white color for line chart
    },
    hoverinfo: 'none' //hidden tooltip
  };
  data.push(result);
}

var layout = {
  showlegend: false,
  height: 600,
  width: 600,

xaxis: {
    visible: false // Hide the x-axis
  },
  yaxis: {
    visible: false // Hide the y-axis
  },
  autosize: false,
  margin: {
    autoexpand: false,
    l: 100,
    r: 20,
    t: 100
  },
  annotations: [
    {
      xref: 'x',
      yref: 'y',
      x: (xData[0][xData[0].length - 1] + xData[0][0]) / 2, // Đặt x ở giữa của trục x
      y: (yData[0][yData[0].length - 1] + yData[0][0]) / 2, // Đặt y ở giữa của trục y
      xanchor: 'center',
      yanchor: 'middle',
      text: '▲ ' + yData[0][0] +'%',
      font:{
        family: 'Arial',
        size: 30,
        color: 'green'
      },
      showarrow: false
    },
    {
      xref: 'x',
      yref: 'y',
      x: (xData[0][xData[0].length - 1] + xData[0][0]) / 2, // Đặt x ở giữa của trục x
      y: (yData[0][yData[0].length - 1] + yData[0][0] - 4) / 2, // Đặt y ở giữa của trục y
      xanchor: 'center',
      yanchor: 'middle',
      text: '$ ' + 4000,
      font:{
        family: 'Arial',
        size: 50,
        color: 'grey'
      },
      showarrow: false
    }
  ]
};

layout.annotations.push(result);

var config = {
  responsive: true,
  editable: false, // Disable chart editing
  scrollZoom: false, // Disable scroll zoom
  displayModeBar: false // Hide the mode bar (the toolbar that appears on hover)
};

Plotly.newPlot(element, data, layout, config );``

[viettran97118]

I spend many time do it!

// Type console.log(x, ys); for more info about x and ys
// To plot your graph call Plotly.plot(element, ...)
// Plotly examples and docs: https://plot.ly/javascript/

var xData = [
  [2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2013]
];

var yData = [
  [74, 82, 80, 74, 73, 72, 74, 70, 70, 66, 66, 69],
];

var colors = ['rgba(67,67,67,1)', 'rgba((255,255,255,1)', 'rgba(49,130,189, 1)',
  'rgba(189,189,189,1)'
];

var data = []; //create empty data

for ( var i = 0 ; i < xData.length ; i++ ) {
  var result = {
    x: xData[i],
    y: yData[i],
    type: 'scatter',
    mode: 'lines',
    line: {
      color: 'rgba((255,255,255,1)', //white color for line chart
    },
    hoverinfo: 'none' //hidden tooltip
  };
  data.push(result);
}
var layout = {
  showlegend: false,
  height: 300,
  width: 300,
  title: 'Graph Title',

xaxis: {
    visible: false // Hide the x-axis
  },
  yaxis: {
    visible: false // Hide the y-axis
  },
  autosize: false,
  margin: {
    autoexpand: false,
    l: 0,
    r: 0,
    t: 0,
    d:0
  },
  annotations: [

 {
      xref: 'x',
      yref: 'y',
      x: (xData[0][xData[0].length - 1] + xData[0][0] - 4.5) / 2, // Đặt x ở giữa của trục x
      y: (yData[0][yData[0].length - 1] + yData[0][0] + 20) / 2, // Đặt y ở giữa của trục y
      xanchor: 'center',
      yanchor: 'middle',
      text: 'MRR (incl cancellations)',
      font:{
        family: 'Arial',
        size: 15,
        color: 'black'
      },
      showarrow: false
    },
 {
      xref: 'x',
      yref: 'y',
      x: (xData[0][xData[0].length - 1] + xData[0][0]-2.7) / 2, // Đặt x ở giữa của trục x
      y: (yData[0][yData[0].length - 1] + yData[0][0] + 12) / 2, // Đặt y ở giữa của trục y
      xanchor: 'center',
      yanchor: 'middle',
      text: '$' + '317,203',
      font:{
        family: 'Arial',
        size: 32,
        color: 'grey'
      },
      showarrow: false
    },
    {
      xref: 'x',
      yref: 'y',
      x: (xData[0][xData[0].length - 1] + xData[0][0] -2.7) / 2, // Đặt x ở giữa của trục x
      y: (yData[0][yData[0].length - 1] + yData[0][0] + 7.5) / 2, // Đặt y ở giữa của trục y
      xanchor: 'center',
      yanchor: 'middle',
      text: '+ 11.18% ($31,888)',
      font:{
        family: 'Arial',
        size: 13,
        color: 'green'
      },
      showarrow: false
    },
    {
      xref: 'x',
      yref: 'y',
      x: (xData[0][xData[0].length - 1] + xData[0][0]-2.7) / 2, // Đặt x ở giữa của trục x
      y: (yData[0][yData[0].length - 1] + yData[0][0] + 4.2) / 2, // Đặt y ở giữa của trục y
      xanchor: 'center',
      yanchor: 'middle',
      text: 'last month ($285,315)',
      font:{
        family: 'Arial',
        size: 13,
        color: 'grey'
      },
      showarrow: false
    }
  ]
};

layout.annotations.push(result);

var config = {
  responsive: true,
  editable: false, // Disable chart editing
  scrollZoom: false, // Disable scroll zoom
  displayModeBar: false // Hide the mode bar (the toolbar that appears on hover)
};

Plotly.newPlot(element, data, layout, config );