How to plot datapoints holding very large values

Question

I have these data to be plotted along y- axis

 Data : {
    0: 146420963625
    1: 147330031125
    2: 148239121125
    3: 149148259875
    4: 150057409875
    5: 150966559875
    6: 151875709875
    7: 152785039875
    8: 153694381125
    9: 154603752375
    10: 155513142375
    11: 156422532375
    12: 157331933625
    13: 158241334875
    14: 159150739875
    15: 160060148625
    16: 1067007000
    17: 1017138000
    18: 967269000
    19: 917449875
    20: 867631125
    21: 818077875
    22: 768526125
    23: 720058125
    24: 671599125
    25: 623639250
    26: 575696625
    27: 531887250
    28: 488085750
    29: 445405125
    }

Tried using this mapping function but the values generated are'nt what i need:

const mapNumber = (number, in_min, in_max, out_min, out_max) => {
  return (number - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
};

Can someone help me figure out how to plot this values that fits within the canvas.

Answer 1

have you tried

CanvasJs?

i have tried values 10M on y-axis and it works fine. you should try like this.

   <!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var limit = 50000;
var y = 10000000;    
var data = [];
var dataSeries = { type: "line" };
var dataPoints = [];
for (var i = 0; i < limit; i += 1) {
    y += Math.round(Math.random() * 10 - 5);
    dataPoints.push({
        x: i,
        y: y
    });
}
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);

//Better to construct options first and then pass it as a parameter
var options = {
    zoomEnabled: true,
    animationEnabled: true,
    title: {
        text: "Try Zooming - Panning"
    },
    axisY: {
        includeZero: false,
        lineThickness: 1
    },
    data: data  // random data
};

var chart = new CanvasJS.Chart("chartContainer", options);
var startTime = new Date();
chart.render();
var endTime = new Date();
document.getElementById("timeToRender").innerHTML = "Time to Render: " + (endTime - startTime) + "ms";

}
</script>
<style>
    #timeToRender {
        position:absolute; 
        top: 10px; 
        font-size: 20px; 
        font-weight: bold; 
        background-color: #d85757;
        padding: 0px 4px;
        color: #ffffff;
    }
</style>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<span id="timeToRender"></span>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

</body>
</html>

reference: https://canvasjs.com/javascript-charts/performance-demo-chart/ and don't worry about how much points you can insert, CanvasJs can handle Millions of points easily. and another best option is to use ChartJs and it can also handle millions of data points. You can read more ChartJs here how much data can charts js handle

Answer 2

Your data object is not a proper JS object or array. Since your keys are sequential, it will be easier to do this as an array rather than an object so your data should look like this:

var Data = [
  146420963625,
  147330031125,
  148239121125,
  149148259875,
  150057409875,
  150966559875
  //etc
]

Then instead of making a function with all those parameters, you can just compute them straight from the data like this:

function mapToCanvas(Data, YScale='100') {   
  var MaxValue = Math.min(...Data);
  var MinValue = Math.max(...Data);
  var Range = MaxValue - MinValue;
  var Coeffecant = YScale / Range;
  return Data.map(x => (x - MinValue) * Coeffecant);
}

Using a console.log, you can see all values are now in the 0 to 100 range. In most cases, you can just keep YScale at 100 and use percentages for positioning; otherwise, you can make YScale the element's height or width and then these values can return displacement in pixels. It all depends on how you are building your graphing tool.

console.log(mapToCanvas(Data));
// or
console.log(mapToCanvas(Data, (document.getElementById('myOutputElement').clientHeight)));

How to plot datapoints holding very large values

Question

2 answers

solution1
1 2019-10-07 18:06:38

solution2
0 2019-10-07 19:08:25

How to plot datapoints holding very large values

Question

2 answers

solution1 1 2019-10-07 18:06:38

solution2 0 2019-10-07 19:08:25

solution1
1 2019-10-07 18:06:38

solution2
0 2019-10-07 19:08:25