CODEWITHSUNDEEP
javascriptdygraphs
ovisopa
ovisopa

Reputation: 143

dygraphs values higher than 1000000 displayed as 1.00e+6. Is there any fix?

I have many sensors in home dashboard, one of them is the energy production, the values are grabbed from my MPP solar inverter, now the values are higher than 1 milion and unfortunately when I hover the mouse over the chart I see 1.04e+6 on any point.

Is there a setting I can change to force it to display numbers higher than 1000000?

function data_totalOutputEnergy() {
    return "" +
    "2022-06-05 08:54,1041020.00\n"+"2022-06-05 08:55,1041020.00\n"+"2022-06-05 08:55,1041020.00\n"+"2022-06-05 20:53,1043330.00\n"+"2022-06-05 20:53,1043330.00\n"+"2022-06-05 20:53,1043330.00\n"+"2022-06-05 20:53,1043330.00\n"+"2022-06-05 20:54,1043330.00\n"+"2022-06-05 20:54,1043330.00\n"+"2022-06-05 20:54,1043330.00\n"+"2022-06-05 20:54,1043330.00\n"+"2022-06-05 20:54,1043330.00\n"+"2022-06-05 20:54,1043330.00\n"+"2022-06-05 20:54,1043330.00\n"+"2022-06-05 20:54,1043330.00\n"+"2022-06-05 20:54,1043330.00\n"+"2022-06-05 20:54,1043330.00\n" ;
    }



g_totalOutputEnergy = new Dygraph(document.getElementById("graph_totalOutputEnergy"),
        data_totalOutputEnergy,
        {
         labels: [ "Date", "High" ],
         labelsDiv: "labels_totalOutputEnergy",
         axisLineColor: "#ccc",
         fillGraph: true,
         valueRange: [0.00, 1043330.00],zoomCallback: function() {
                         g.updateOptions({valueRange:[0.00,1043330.00]});
                     },
         colors:
                [ "#EDA21F", "#008080", "#00BFFF", "#FFD700", "#FF69B42", "#20B2AA",
                 "#FF0000", "#FFFF00", "#FF1493", "#000080", "#00FF00", "#6B8E23", "#00FA9A",
                 "#B0C4DE", "#F0E68C", "#DAA520"],
        
        axes : {
            x : {
              drawGrid: show_box,
              drawAxis : true,
            },
            y : {
              
              gridLineColor: '#5f666d',
              drawAxis : true,
            }
        }   
             
                 /*,
        showRangeSelector: true,
        rangeSelectorHeight: 80*/        
        });

Upvotes: 1

Views: 116

Answers (1)

Lucidio Vacas
Lucidio Vacas

Reputation: 720

If you check dygraphs documentation there is one easy way to achieve what you want. Just add the following setting with the max number of digits you need and it should be working.

maxNumberWidth: 12

I have inserted the next snippet where you can see it working with the third value of the series.

var data = "Index,Value\n" +
    "1,20\n" +
    "2,30\n" +
    "3,30000000\n" +
    "4,10\n" +
    "5,24\n" +
    "6,25\n" +
    "7,74";

var graph1 = new Dygraph(document.getElementById("graph1"), data, {
    legend: "always",
    strokeWidth: 2,
    maxNumberWidth: 12,
    title: "Using long numbers without scientific notation",
});
#graph1, #graph2 {
  height: 400px;
  width: 700px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.js"></script>
<div id="graph1" ></div>

Another solution would be to parse the values using dygraphs, so then you could show the result as 3.45MWh instead of 3450000W (just an example).

Hope it works for you. Let me know.

Upvotes: 2

Related Questions