This doesn't have anything to do with VPN, multi WAN, etc. It's the same interface ("PLDT") in either case.
I checked the code. Both graphs are produced by /usr/local/www/js/traffic-graphs.js and the data for both comes from the same rrd file.
The graphs have different refresh rates, resulting in different time periods, which results in different time averaging intervals for rrd. The Traffic Graph page, with a hard-coded refresh rate of 1, ends up with a shorter time interval (magnified view) when compared to the Dashboard widget with a default refresh rate of 3. So on the Traffic Graph page you might see two brief spikes of 40M in quick succession, however on the dashboard widget only see one spike of 20M. It's still the same data.
FWIW, The graphs also have different smoothing applied, but this doesn't have nearly as much of an impact as the time averaging interval.
If you really want the Dashboard widget and the Traffic Graph page to match, you would need to change the widget refresh period to 1 second. In general this is not recommended due to the increased CPU requirement, but you have to decide what's more important to you.