Skip to content Skip to sidebar Skip to footer

Dynamic Scaling For Canvas Graphs

I'm working on a canvas JS application to facilitate graphing, it's a personal project. An issue I'm having trouble with currently is scaling of variables to display visually. for

Solution 1:

Yes, you can "map" source values into a designated range.

This mapRange function allows you to scale/map your 1000x1000 values into your 600x600 canvas

// Given low,high values of the source(1000,1000)
// Given low,hight values of the mapped numbers (600,600)
// and given a value to map from the source to the destination range (value)
// map the source value into a designated range

function mapRange(value, sourceLow, sourceHigh, mappedLow, mappedHigh){

    return mappedLow + (mappedHigh - mappedLow) * 
           (value - sourceLow) / (sourceHigh - sourceLow);

}

Post a Comment for "Dynamic Scaling For Canvas Graphs"