Home Forums Chart Support Speedometer chart

Speedometer chart

Viewing 6 posts - 1 through 6 (of 6 total)
  • #24210

    Hi.

    Can canvas is do speedometers? Customer has asked to change it to speedeometer for a graph of marks out of 10.
    Thanks

    • This topic was modified 5 years, 8 months ago by amityweb.
    #24220

    @amityweb,

    Sorry, we don’t have a gauge chart as of now but a semi doughnut chart can be used to create it. Please below the steps below for creating a gauge chart using a doughnut chart.

    First, we need to create an object that will store all the necessary data that is needed to be shown on the gauge chart. The code snippet below shows an example of that object:

    var gauge = {
      title:{text: "Gauge Chart"},
      data: { y: 7 }, //gauge value 
      maximum: 10
    };

    In the second step, we will initialize the chart object and populate its dataPoints considering the fact that only half of the doughnut chart be displayed. Please refer to the code snippet below for achieving the same:

    var chart = new CanvasJS.Chart("chartContainer");
    createGauge(chart);
    
    //Function for gauge
    function createGauge(chart){
      //Caluculation of remaining parameters to render gauge with the help of doughnut
      gauge.unoccupied = {
        y: gauge.maximum - gauge.data.y , 
        color: "#DEDEDE", 
        toolTipContent: null, 
        highlightEnabled: false,
        click : function (){ gauge.unoccupied.exploded = true; }
      }
      gauge.data.click = function (){ gauge.data.exploded = true; };
      if(!gauge.data.color)
        gauge.data.color = "#69C434";
      gauge.valueText = {text: gauge.data.y.toString(), verticalAlign :"center"};
    
      var data = {
        type: "doughnut",
        dataPoints: [
          {
            y: gauge.maximum ,
            color: "transparent",
            toolTipContent: null
          },
          gauge.data,
          gauge.unoccupied
        ],
      };
    
      if(!chart.options.data)
        chart.options.data = [];
      chart.options.data.push(data);
    
      if(gauge.title){
        chart.options.title = gauge.title;
      }
    
      //For showing value
      if(!chart.options.subtitles)
        chart.options.subtitles = [];
      chart.options.subtitles.push(gauge.valueText);
    
      chart.render();
    }

    You can also refer to take a look at this JSFiddle for a working example with sample code.

    Gauge Chart


    Shashi Ranjan
    Team CanvasJS

    #27390

    We create an speedometer with the following link suggestion that use CanjasJS.
    https://codepen.io/PowerTower/pen/GQONjy

    Whats we did:
    1) We Created diferentes areas but the color is the same “white”, once is our background-color:
    data: [
    {
    type: ‘doughnut’,
    dataPoints: [
    {
    y: 1,
    color: ‘white’
    },
    {
    y: 1,
    color: ‘white’
    }
    ,
    {
    y: 1,
    color: ‘white’
    }
    ]
    Basicaly we use de structure of diferentes color for separate areas, However all color we use “white” that is ou background-color. So the color is never shown.

    2) We removed the center informaton number.

    3) We adjusted the pointer position and size.

    4) We add a background-img in at the div

    If you want to see the result, check the link: https://silossoft.com.br/canvasjs-gauge-speedometer.jpg

    I hope this could help someone else

    #27432

    Hi Carlos,

    That’s nice work. It will definitely help many others.

    Thanks for taking the efforts and posting in this community forum.


    Sandeep
    Team CanvasJS

    #36993

    Hi Carlos,

    How we can set maximum value limit of needle on the example to 10, it is now 100.

    • This reply was modified 2 years, 8 months ago by m.usman.
    #37003

    @m-usman,

    You can customize a DIV using CSS to visualize the needle as shown in the code snippet below –

    HTML
    <div class="speedometer__needle js-needle"></div>

    CSS

    .speedometer__needle {
      position: absolute;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: transparent;
      top: 72%;
      left: 50%;
      transition: .3s ease-in-out;

    To position the needle at a specific point you can use CSS transform property. Please check the code snippet below –

    $( '.js-needle' ).css({
      'transform' : 'translate(-50%, -50%) rotate('+  (tickValue * 18.0) + 'deg)'
    });

    Please check this JSFiddle for a working example which meets your requirement.

    Speedometer Chart


    Thangaraj Raman
    Team CanvasJS

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.